2021-04-09

微信小程序，自定义tabbar 根据角色进入不同的页面，实现一个入口跳转不同的页面

实现逻辑：

1.使用自定义tabbar

2.custom-tab-bar 配置多个tabbar 配置

3.如果想隐藏tabbar 只需要设置 tabbar list 为空

下面是关键代码：

在这里插入代码片
// custom-tab-bar/index.js

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    list: [],
    list1: [{
      pagePath: "/index/index",
      iconPath: "/image/icon_component.png",
      selectedIconPath: "/image/icon_component_HL.png",
      text: "组件"
    }, {
      pagePath: "/index/index2",
      iconPath: "/image/icon_API.png",
      selectedIconPath: "/image/icon_API_HL.png",
      text: "接口"
    }
  ],
  list2: [{
    pagePath: "/index/index3",
    iconPath: "/image/icon_API.png",
    selectedIconPath: "/image/icon_API_HL.png",
    text: "测试"
  },
  {
    "pagePath": "/index/index4",
    "iconPath": "/image/icon_API.png",
    "selectedIconPath": "/image/icon_API_HL.png",
    "text": "我的"
  }
]
  },
  attached() {
    //  写判断，选择不同的tabbar
    let role = wx.getStorageSync('role');
    if(role === 'cs'){
      this.setData({
        list: this.data.list1
      })
    }else if(role === 'cs1'){
      this.setData({
        list: this.data.list2
      })
    }else{
      this.setData({
        list: []
      })
    }
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
      this.setData({
        selected: data.index
      })
    }
  }
})

在这里插入代码片

<!--custom-tab-bar/index.wxml-->
// 此处判断是为了在判断页面隐藏底部tab
<cover-view class="tab-bar" wx:if="{{list.length > 0}}">
  <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>

// index/index.js
Component({
  pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 0
        })
      }
    }
  }
})