小程序自定义底部菜单tabBar,根据不同身份显示不同tabBar

1、在根目录建立custom-tab-bar目录
js:

const app = getApp()
Component({
  data: {
    selected: null,
    isSelect: 1,
    "color": "#666666",
    "selectedColor": "#5677FC",
    "backgroundColor": "#FFFFFF"
  },
  ready: function(){

    var obj = this.createSelectorQuery();
    obj.select('.tab-bar').boundingClientRect(function (rect) {
      wx.setStorageSync('tabBarHeight', rect.height)     // 将获取到的高度设置缓存，以便之后使用
    }).exec();
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({
       url: url
      })
/*      this.setData({
        selected: data.index
      })*/
    }
  }
})

wxml:

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

json:

{
  "component": true
}

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;
}

2、在app.json中设置custom为true

  "tabBar": {
    "custom": true,
    "color": "#666666",
    "selectedColor": "#5677FC",
    "backgroundColor": "#FFFFFF",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "主页",
        "iconPath": "custom-tab-bar/static/images/tabbar/home_gray.png",
        "selectedIconPath": "custom-tab-bar/static/images/tabbar/home_active.png"
      },
      {
        "pagePath": "pages/power/power",
        "text": "电能",
        "iconPath": "custom-tab-bar/static/images/tabbar/alarm_gray.png",
        "selectedIconPath": "custom-tab-bar/static/images/tabbar/alarm_active.png"
      },
      {
        "pagePath": "pages/circuit/circuit",
        "text": "设备",
        "iconPath": "custom-tab-bar/static/images/tabbar/device_gray.png",
        "selectedIconPath": "custom-tab-bar/static/images/tabbar/device_active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "custom-tab-bar/static/images/tabbar/my_gray.png",
        "selectedIconPath": "custom-tab-bar/static/images/tabbar/my_active.png"
      }
    ]
  },

3、在app.js中设置：

  globalData: {
    isLogin: wx.getStorageSync("thorui_mobile") ? true : false,
    version: "1.4.2",
    isOnline:false,
    role: '',
    host: [      {
      "pagePath": "/pages/home/home",
      "text": "主页",
      "iconPath": "static/images/tabbar/home_gray.png",
      "selectedIconPath": "static/images/tabbar/home_active.png"
    },
      {
        "pagePath": "/pages/power/power",
        "text": "电能",
        "iconPath": "static/images/tabbar/alarm_gray.png",
        "selectedIconPath": "static/images/tabbar/alarm_active.png"
      },
      {
        "pagePath": "/pages/circuit/circuit",
        "text": "设备",
        "iconPath": "static/images/tabbar/device_gray.png",
        "selectedIconPath": "static/images/tabbar/device_active.png"
      },
      {
        "pagePath": "/pages/my/my",
        "text": "我的",
        "iconPath": "static/images/tabbar/my_gray.png",
        "selectedIconPath": "static/images/tabbar/my_active.png"
      }],
    client: [      {
      "pagePath": "/pages/home/home",
      "text": "主页",
      "iconPath": "static/images/tabbar/home_gray.png",
      "selectedIconPath": "static/images/tabbar/home_active.png"
    },
      {
        "pagePath": "/pages/power/power",
        "text": "电能",
        "iconPath": "static/images/tabbar/alarm_gray.png",
        "selectedIconPath": "static/images/tabbar/alarm_active.png"
      },
      {
        "pagePath": "/pages/my/my",
        "text": "我的",
        "iconPath": "static/images/tabbar/my_gray.png",
        "selectedIconPath": "static/images/tabbar/my_active.png"
      }]
  }

4、登录时判断角色显示不同的底部菜单
login.js

  accountLoginClick: function(e) {
    let userInfo = e.detail.value
    let username = userInfo.username;
    let password = userInfo.password;
    if (this.match(username, "请输入用户名") &&
        this.match(password, "请输入密码")) {
      let req = new Request();
      req.method = "sys/login";
      req.params = {
        username: username,
        password: password
      }
      req.complete = (res) => {
        let response = res.data;
        if (null != response &&
            response != undefined) {
          let rspCode = response.code;
          if ('0' == rspCode) {
            globalData.isLogin = true;
            if(response.data.ops === 0){
              globalData.role = 'host'
            }else {
              globalData.role = 'client'
            }
            wx.setStorageSync("thorui_role", globalData.role);
    
            util.toast("登录成功",2000, true);
            setTimeout(()=>{
              wx.reLaunch({
                url: '../home/home' // TODO url: '../welcome/welcome'
              })
            },200);
          }
        }
      }
      req.request();
    }
  },

5、在每个要加载的页面js中加入判断

``

if (typeof this.getTabBar === 'function' &&
    this.getTabBar()) {
  if (wx.getStorageSync("thorui_role") === 'host') {
    this.getTabBar().setData({
      list: globalData.host,
      selected: 0
    })
  } else {
    this.getTabBar().setData({
      list: globalData.client,
      selected: 0
    })
  }
}
wx.hideTabBar()

globalData引入：let globalData = getApp().globalData;

但此方案加载出来的底部菜单切换的时候有闪烁情况，为解决此问题可以将底部显示的内容作为父组件，其他显示的内容作为子组件嵌套进去，但因为种种原因，并没有此方法解决

借鉴：
https://blog.csdn.net/weixin_43647163/article/details/105648876
https://www.jianshu.com/p/f60d1a28ed2a
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html