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

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

  1. "custom": true ,在app.json中,tabBar中开启自定义;
    微信小程序自定义tabBar根据不同角色展示不同菜单_第1张图片
  2. 微信官方文档的自定义 tabBar
    传送门:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html微信小程序自定义tabBar根据不同角色展示不同菜单_第2张图片
    项目根目录下建立相同文件夹微信小程序自定义tabBar根据不同角色展示不同菜单_第3张图片
  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
      })
    }
  },
})
  1. 设置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>

  1. 设置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;
}
  1. 最后一步,在需要使用到tabBar的页面的.js文件中的Onshow函数中,还需要以下设置(为了点击时候选中和页面一致
    微信小程序自定义tabBar根据不同角色展示不同菜单_第4张图片
    OK!可以开始操作了,有问题滴滴我。

你可能感兴趣的:(小程序,小程序)