小程序根据不同用户，显示不同tabBar（官方自定义 tabBar）

现有需求：小程序用户有2种身份（vip，普通用户）
微信小程序全局文件app.json里面的"tabBar"里面的list只能放置2-5个；

代码实现

1、app.json
tabbar里面的sustom要设置为true

{"pages": [xxxx],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#ffffff","navigationStyle": "default","navigationBarTextStyle": "black"},"tabBar": {"custom": true,"color": "#BDBDBD","selectedColor": "#212121","backgroundColor": "#FFFFFF","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "img/tabicon/home.png","selectedIconPath": "img/tabicon/home-active.png"},{"pagePath": "pages/signin/signin","text": "签到","iconPath": "img/tabicon/sign.png","selectedIconPath": "img/tabicon/sign-active.png"},{"pagePath": "pages/card/card","text": "优惠券","iconPath": "img/tabicon/card.png","selectedIconPath": "img/tabicon/card-active.png"},{"pagePath": "pages/profitSelect/profitSelect","text": "收益","iconPath": "img/tabicon/card.png","selectedIconPath": "img/tabicon/card-active.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "img/tabicon/my.png","selectedIconPath": "img/tabicon/my-active.png"}]},"style": "v2","sitemapLocation": "sitemap.json"
}

可以看到app.json里面放了5个不同的tabbar路径

2、自定义tabbar（ custom-tab-bar官方命名）

（1）index.js

1. 小程序tabbar只识别list
2. 根据用户缓存信息，判断用户的身份或登录状态（roleId == ‘’ || roleId == 2）
3. 根据用户的身份把tabList里面的子数组赋值给系统默认识别的`list``
4. switchTab的作用根据不同的路径切换tabbar下标

Component({data: {selected: 0,color: "#BDBDBD",roleId: '',selectedColor: "#212121",tabList: [{list1: [{"pagePath": "/pages/index/index","text": "首页","iconPath": "/img/tabicon/home.png","selectedIconPath": "/img/tabicon/home-active.png"},{"pagePath": "/pages/signin/signin","text": "签到","iconPath": "/img/tabicon/sign.png","selectedIconPath": "/img/tabicon/sign-active.png"},{"pagePath": "/pages/card/card","text": "优惠券","iconPath": "/img/tabicon/card.png","selectedIconPath": "/img/tabicon/card-active.png"},{"pagePath": "/pages/my/my","text": "我的","iconPath": "/img/tabicon/my.png","selectedIconPath": "/img/tabicon/my-active.png"}],list2: [{"pagePath": "/pages/index/index","text": "首页","iconPath": "/img/tabicon/home.png","selectedIconPath": "/img/tabicon/home-active.png"},{"pagePath": "/pages/signin/signin","text": "签到","iconPath": "/img/tabicon/sign.png","selectedIconPath": "/img/tabicon/sign-active.png"},{"pagePath": "/pages/profitSelect/profitSelect","text": "收益","iconPath": "/img/tabicon/card.png","selectedIconPath": "/img/tabicon/card-active.png"},{"pagePath": "/pages/my/my","text": "我的","iconPath": "/img/tabicon/my.png","selectedIconPath": "/img/tabicon/my-active.png"}],}],list: []},attached() {const roleId = wx.getStorageSync('is_vip')if (roleId == '' || roleId == 2) { //普通用户和未登录时默认第一种this.setData({list: this.data.tabList[0].list1})} else if (roleId == 1) { //vip用户显示第二种this.setData({list: this.data.tabList[0].list2})}},methods: {switchTab(e) {const data = e.currentTarget.datasetconst url = data.pathwx.switchTab({ url })this.setData({selected: data.index})}},})

（2）index.wxml（可参照官方文档）

<cover-view class="tab-bar"><cover-view class="tab-bar-border"></cover-view><cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"><cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image><cover-view :style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view></cover-view></cover-view>

ps：有时会报错，修改调试

（3）index.wxss（参照官方文档）

.tab-bar {position: fixed;bottom: 0;left: 0;right: 0;height: 48px;background: white;display: flex;padding-bottom: env(safe-area-inset-bottom);
}.tab-bar-border {background-color: rgba(0, 0, 0, 0.33);position: absolute;left: 0;top: 0;width: 100%;height: 1px;transform: scaleY(0.5);
}.tab-bar-item {flex: 1;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;
}.tab-bar-item cover-image {width: 27px;height: 27px;
}.tab-bar-item cover-view {font-size: 10px;
}

3、凡是需要显示tabbar组件的页面，对应的xx.js里的onshow:function(){}都要按照以下进行设置方可显示tabber（selected的值是这个页面在tabbar中的顺序）

onShow() {if (typeof this.getTabBar === 'function' &&this.getTabBar()) {this.getTabBar().setData({selected: 0})}},

emmm