微信小程序中使用colorui自定义tabbar按钮_colorui 按钮

废话不多说,直接上代码

app.json

{
  "pages": [

  ],
  "window": {
    "navigationBarBackgroundColor": "#379afb",
    "navigationBarTitleText": "青丰工具",
    "navigationStyle": "custom",
    "navigationBarTextStyle": "white"
  },
  "usingComponents": {},
  "tabBar": {
    "custom": true,
    "color": "#aaa",
    "selectedColor": "#39b54a",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/information/information",
        "text": "找群"
      },
      {
        "pagePath": "pages/person/person",
        "text": "找人"
      },
      {
        "pagePath": "pages/release/release",
        "text": "发布"
      },
      {
        "pagePath": "pages/source/source",
        "text": "找资源"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的"
      }
    ]
  },
  "sitemapLocation": "sitemap.json",
  "cloudfunctionRoot": "./cloudfunction/"

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

新建一个文件夹,名字叫custom-tab-bar

index.js

Component({
  properties: {

  },
  data: {
    selected:0,
    tabList:[
      {
        "pagePath": "pages/information/information",
        "text": "找群",
      },
      {
        "pagePath": "pages/person/person",
        "text": "找人",
      },
      {
        "pagePath": "pages/release/release",
        "text": "发布",
      },
      {
        "pagePath": "pages/source/source",
        "text": "找资源",
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的"
      }
    ]
  },
 
  methods: {
    switchTab(e){
       
      console.log(this.data)
      let key = Number(e.currentTarget.dataset.index);
      let tabList = this.data.tabList;
      let selected = key;
        this.setData({
          selected:key
        })
    
        wx.switchTab({
          url: `/${tabList[key].pagePath}`,
        })
     
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

index.wxml

<view class="box" >
	<view class="cu-bar tabbar">
		<view class="action {{selected === 0 ? 'text-green' : 'text-gray'}}" data-index="0" bindtap="switchTab">
      <view  class="{{selected === 0 ? 'icon-group_fill' : 'icon-group'}}"></view>找群

		</view>

		<view class="action {{selected === 1 ? 'text-green' : 'text-gray'}}" data-index="1" bindtap="switchTab">
      <view class="{{selected === 1 ? 'icon-friendaddfill' : 'icon-friendadd'}}"></view>找人
		</view>

		<view class="action {{selected === 2 ? 'text-green add-action' : 'text-gray add-action'}}"  data-index="2" bindtap="switchTab">
      <button class='cu-btn icon-add bg-gradual-blue shadow'></button>
      发布
		</view>

		<view class="action {{selected === 3 ? 'text-green' : 'text-gray'}}" data-index="3" bindtap="switchTab">
      <view class="{{selected === 3 ? 'icon-favorfill' : 'icon-favor'}}"></view>找资源
		</view>
	
		<view class="action {{selected === 4 ? 'text-green' : 'text-gray'}}" data-index="4" bindtap="switchTab">
      <view class="{{selected === 4 ? 'icon-myfill' : 'icon-my'}}">
        <!-- <view class='cu-tag badge'></view> -->
      </view>
      我的
		</view>

	</view>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

index.wxss

@import "/colorui.wxss";
@import "/icon.wxss";

.tabbar{
  background-color: #ffffff;
 
}
.bg-cyan{
  background-color: #cce6ff;
}
.active{
  color: blue;
}
.default{
  color:rgb(51, 24, 24);
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

任意一个页面的方法中加入:

 tabBar(){
      if(typeof this.getTabBar === 'function' && this.getTabBar()){
       
        this.getTabBar().setData({
          selected:4,
        })
      }
    },
1
2
3
4
5
6
7
8

即可实现以下效果: