微信小程序不同角色显示不同tabar

1、首先创建组件（要与pages同级）

2、custom-tab-bar 文件夹下的 代码

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 class="cover-image" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view class="cover-view" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

一定要使用cover-view和cover-image标签，不然层级不够

wxss

/* custom-tab-bar/index.wxss */
.tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: #FFFFFF;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 999999;
}
  
.tab-bar-border {
    background-color: #FFFFFF;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    transform: scaleY(0.5);
    z-index: 999999;
}
  
.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: 44rpx;
    height: 44rpx;
}
  
.tab-bar-item .cover-view {
    margin-top: 8rpx;
    font-size: 24rpx;
}
  

js

const app = getApp();
Component({
    data: {
        selected: 0,
        color: "#C2C7CC",
        roleId: '',
        selectedColor: "#FF992E",
        backgroundColor: "#ffffff",
        allList: [{
            //商家角色
            list1: [
                {
                    "pagePath": "../../pages/index/index",
                    "text": "首页",
                    "iconPath": "../images/index_icon.png",
                    "selectedIconPath": "../images/index_active_icon.png"
                },
                {
                    "pagePath": "../../pages/order/order",
                    "text": "订单",
                    "iconPath": "../images/order_icon.png",
                    "selectedIconPath": "../images/order_active_icon.png"
                },
                {
                    "pagePath": "../../pages/user/user",
                    "text": "我的",
                    "iconPath": "../images/my_icon.png",
                    "selectedIconPath": "../images/my_active_icon.png"
                }
            ],
            //员工角色
            list2: [
                {
                    "pagePath": "../../pages/stafforder/stafforder",
                    "text": "订单",
                    "iconPath": "../images/order_icon.png",
                    "selectedIconPath": "../images/order_active_icon.png"
                },
                {
                    "pagePath": "../../pages/staffuser/staffuser",
                    "text": "我的",
                    "iconPath": "../images/my_icon.png",
                    "selectedIconPath": "../images/my_active_icon.png"
                }
            ],
        }],
        list: []
    },
    attached() {
    //   const roleId = 1//员工2商家1
      let roleId = wx.getStorageSync('roleId');
    //   console.log('roleId',roleId)
      if (roleId == 1) {
        this.setData({
          list: this.data.allList[0].list1
        })
      } else if (roleId == 2) {
        this.setData({
          list: this.data.allList[0].list2
        })
      }else{
        this.setData({
            list: this.data.allList[0].list1
        })
      }
    },
    methods: {
      switchTab(e) {
        const data = e.currentTarget.dataset      
        const url = data.path
        wx.switchTab({ url })
        // this.setData({
        //   selected: data.index
        // })
      }
    },
})
  

注意：app.json 文件中一定要把所需要的tabbar列举粗来（本人在刚开始写的时候就是没有在app.json写第二种角色的底部tabbar导致显示的时候底部tabbar出不来）


tabbar组件的json文件

{
  "component": true,
  "usingComponents": {}
}

最后在所有的所需要的的页面进行判断显示

/**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
     if (typeof this.getTabBar === 'function' &&  this.getTabBar()) {
         let selected = 1;
         let roleId = wx.getStorageSync('roleId');
         if(roleId == 2){
           selected = 0;
         }
         this.getTabBar().setData({
           selected
         })
     }
 },

目前用户体验度不太好，会出现闪现的问题，如果有解决的可以共享一下的呀