小程序根据不同用户，显示不同tabBar

小程序根据不同用户，显示不同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.dataset
            const url = data.path
            wx.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