微信小程序自定义tabBar根据不同角色展示不同菜单

微信小程序自定义tabBar根据不同角色展示不同菜单

1. "custom": true ，在app.json中，tabBar中开启自定义；
   
2. 微信官方文档的自定义 tabBar
   传送门：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
   项目根目录下建立相同文件夹
3. 设置index.js文件（“custom-tab-bar”中的index.js）

Component({
  data: {
    selected: 0,
    color: "#000000",
    roleId: '',
    selectedColor: "#1396DB",
    allList: [{
      //客服角色
      list1: [{
        pagePath: "/pages/user/user",
        text: "技术",
        iconPath: "/images/user-white.png",
        selectedIconPath: "/images/user-white.png"
      },
      {
        pagePath: "/pages/order/orders",
        text: "订单",
        iconPath: "/images/order0-white.png",
        selectedIconPath: "/images/order0-white.png"
      },
      {
        pagePath: "/pages/home/home",
        text: "主页",
        iconPath: "/images/home-white.png",
        selectedIconPath: "/images/home-white.png"
      }],
      //技术角色
      list2: [{
        pagePath: "/pages/process/process",
        text: "流程",
        iconPath: "/images/infrom-white.png",
        selectedIconPath: "/images/infrom-white.png"
      },
      {
        pagePath: "/pages/order/orders",
        text: "订单",
        iconPath: "/images/order0-white.png",
        selectedIconPath: "/images/order0-white.png"
      },
      {
        pagePath: "/pages/home/home",
        text: "主页",
        iconPath: "/images/home-white.png",
        selectedIconPath: "/images/home-white.png"
      }],
    }],
    list: []
  },
  attached() {
    const roleId = 1//技术2客服1
    if (roleId == 1) {
      this.setData({
        list: this.data.allList[0].list1
      })
    } else if (roleId == 2) {
      this.setData({
        list: this.data.allList[0].list2
      })
    }
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({ url })
      this.setData({
        selected: data.index
      })
    }
  },
})

4. 设置index.wxml文件（“custom-tab-bar”中的index.wxml）

<!--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>

5. 设置index.css文件（“custom-tab-bar”中的index.css）

/* custom-tab-bar/index.wxss */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: #389375;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: #FFFFFF;
  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: 44rpx;
  height: 44rpx;
}

.tab-bar-item .cover-view {
  margin-top: 8rpx;
  font-size: 24rpx;
}

6. 最后一步，在需要使用到tabBar的页面的.js文件中的Onshow函数中，还需要以下设置（为了点击时候选中和页面一致）
   
   OK！可以开始操作了，有问题滴滴我。