微信小程序动态控制tabbar的数量，uniApp动态控制tabbar的数量

需求分析：

        小程序登录进来有2种身份，每种身份看到的页面不一样，而且tabbar的数量也不一样，这个时候就需要用到微信小程序的自定义tabbar， 自定义tabbar和原生tabbar在用户体验上差不多，几乎看不出有什么区别，废话不多说直接上代码

创建一个文件夹 custom-tab-bar，uniApp和微信小程序一样 放在项目根目录 （文件名不可更改）（如图所示）

如果是uniapp项目，代码也是wxml,wxss的语法， custom-tab-bar并不会被uniapp编译

在custom-tab-bar文件夹创建index.wxml  (小程序官方建议：使用cover-view把层级尽量提高)

1.  
   <!--miniprogram/custom-tab-bar/index.wxml-->
2.  
   <cover-view class="tab-bar">
3.  
   <cover-view class="tab-bar-border"></cover-view>
4.  
   <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
5.  
   <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
6.  
   <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
7.  
   </cover-view>
8.  
   </cover-view>

在custom-tab-bar文件夹创建index.js

        通过改变list来更新tabbar的样式，以及数量

1.  
   Component({
2.  
   data: {
3.  
   selected: 0,
4.  
   color: "#7A7E83",
5.  
   selectedColor: "#3cc51f",
6.  
   list: [{
7.  
   pagePath: "/index/index1",
8.  
   iconPath: "/image/icon_component.png",
9.  
   selectedIconPath: "/image/icon_component_HL.png",
10.  
    text: "组件1"
11.  
    }, {
12.  
    pagePath: "/index/index2",
13.  
    iconPath: "/image/icon_API.png",
14.  
    selectedIconPath: "/image/icon_API_HL.png",
15.  
    text: "组件2"
16.  
    },
17.  
    {
18.  
    pagePath: "/index/index3",
19.  
    iconPath: "/image/icon_API.png",
20.  
    selectedIconPath: "/image/icon_API_HL.png",
21.  
    text: "组件3"
22.  
    }
23.  
    ]
24.  
    },
25.  
    show() {
26.  
    // 可以在这里控制显示
27.  
    },
28.  
    methods: {
29.  
    switchTab(e) {
30.  
    const data = e.currentTarget.dataset
31.  
    const url = data.path
32.  
    wx.switchTab({url})
33.  
    this.setData({
34.  
    selected: data.index
35.  
    })
36.  
    }
37.  
    }
38.  
    })

在custom-tab-bar文件夹创建index.wxss 

1.  
   .tab-bar {
2.  
   position: fixed;
3.  
   bottom: 0;
4.  
   left: 0;
5.  
   right: 0;
6.  
   height: 48px;
7.  
   background: white;
8.  
   display: flex;
9.  
   padding-bottom: env(safe-area-inset-bottom);
10.  
    }
11.  
     
12.  
    .tab-bar-border {
13.  
    background-color: rgba(0, 0, 0, 0.33);
14.  
    position: absolute;
15.  
    left: 0;
16.  
    top: 0;
17.  
    width: 100%;
18.  
    height: 1px;
19.  
    transform: scaleY(0.5);
20.  
    }
21.  
     
22.  
    .tab-bar-item {
23.  
    flex: 1;
24.  
    text-align: center;
25.  
    display: flex;
26.  
    justify-content: center;
27.  
    align-items: center;
28.  
    flex-direction: column;
29.  
    }
30.  
     
31.  
    .tab-bar-item cover-image {
32.  
    width: 27px;
33.  
    height: 27px;
34.  
    }
35.  
     
36.  
    .tab-bar-item cover-view {
37.  
    font-size: 10px;
38.  
    }

在custom-tab-bar文件夹创建index.json

1.  
   {
2.  
   "component": true
3.  
   }

 

配置app.json

        重要提示：“app.json中tabbar的list属性往多的配置，我理解为初始化站位，例如 true的时候显示2个tab，false的时候显示3个tab，那么tabbar的list里面就要配置三个tab，然后在custom-tab-bar/index.js里面可以控制tab的显示数量”

1.  
   {
2.  
   "pages":[
3.  
   "index/index",
4.  
   "index/index2",
5.  
   "index/index3"
6.  
   ],
7.  
   "tabBar": {
8.  
   "custom": true,
9.  
   "list": [
10.  
    {
11.  
    "pagePath": "index/index1",
12.  
    "text": "组件1"
13.  
    },
14.  
    {
15.  
    "pagePath": "index/index2",
16.  
    "text": "组件2"
17.  
    },
18.  
    {
19.  
    "pagePath": "index/index3",
20.  
    "text": "组件3"
21.  
    }
22.  
    ]
23.  
    },
24.  
    "window":{
25.  
    "backgroundTextStyle":"light",
26.  
    "navigationBarBackgroundColor": "#fff",
27.  
    "navigationBarTitleText": "WeChat",
28.  
    "navigationBarTextStyle":"black"
29.  
    }
30.  
    }

页面配置

        我这里有index1,index2,index3,三个页面，分别在页面的onShow事件里面新增如下代码，

         selected 是当前页面 在 custom-tab-bar/index.js里面list配置的索引也就是index

        例如：上面的 index1页面是0， index2页面是1，index3页面是2

1.  
   onShow(){
2.  
   if (typeof this.getTabBar === 'function' && this.getTabBar()) {
3.  
   //selected 是当前页面 在 custom-tab-bar/index.js里面list配置的索引也就是index
4.  
   this.getTabBar().setData({
5.  
   selected: 2
6.  
   })
7.  
   }
8.  
   }

欢迎大家留言讨论，如有问题私信我

这篇好文章是转载于：学新通技术网