小程序动态切换自定义tabbar方案

需求的场景描述:
我现在要根据登录者的权限，动态的去显示或者隐藏某个tabBar，怎么弄？？

小程序原生tabbar是暂不支持此功能的，tabbar相关api请参考：https://developers.weixin.qq.com/miniprogram/dev/api/ui/tab-bar/wx.showTabBarRedDot.html

方案1：自定义组件 <template is="tabBar" data="{{tabBar:tabBar}}"></template>

• https://www.jianshu.com/p/55d54564ec95
• https://blog.csdn.net/qq_42129925/article/details/89923212
  实际应用中：性能相比原生的有点差距，而且有些手机有时候会闪白

方案2：自定义tabbar

• // app.json

  "tabBar": {
  "custom": true,//自定义tabbar
  "list": [
  //所有tabbar页面声明
  ]
  },

• app.js

  //声明全局变量
  globalData: {
  list: []
  },
  onLaunch() {
  //登录code,获取用户openid以及拿取后台的用户信息
  //控制tabbar,修改变量为所展示tabbar
  if(xx==’’){
  //第一种tabbar
  this.globalData.list = [
  {
  pagePath: "/pages/xx/xx",
  iconPath: "/image/xx.png",
  selectedIconPath: "/image/xx.png",
  text: "首页"
  },
  {
  pagePath: "/pages/xx/xx",
  iconPath: "/image/xx.png",
  selectedIconPath: "/image/xx.png",
  text: "管理"
  },
  {
  pagePath: "/pages/xx/xx",
  iconPath: "/image/xx.png",
  selectedIconPath: "/image/xx.png",
  text: "我的"
  }
  ]
  } else {
  //第二种tabbar
  this.globalData.list = [
  {
  pagePath: "/pages/xx/xx",
  iconPath: "/image/xx.png",
  selectedIconPath: "/image/xx.png",
  text: "首 页"
  }，
  {
  pagePath: "/pages/xx/xx",
  iconPath: "/image/xx.png",
  selectedIconPath: "/image/xx.png",
  text: "我 的"
  }
  ]
  }
  }

• 修改custom-tab-bar/index.js

  const app =getApp();
  Component({
  data: {
  selected: 0,
  color: "#7A7E83",
  selectedColor: "#1296db",
  list: []
  },
  // 生命周期
  attached() {
  console.log(app.globalData.list)
  this.setData({
  list:app.globalData.list
  })
  },
  methods: {
  //切换tabbar
  switchTab(e) {
  const data = e.currentTarget.dataset
  const url = data.path
  wx.switchTab({url})
  this.setData({
  selected: data.index
  })
  }
  }
  })

• 如果选中状态有问题，则可以在对应tabbart页面index.js中修改

  onShow: function() {
  //添加选中效果
  if (typeof this.getTabBar === ‘function’ && this.getTabBar()) {
  //自定义组件的getTabBar 方法，可获取当前页面下的自定义 tabBar 组件实例。
  this.getTabBar().setData({
  selected: 0 //这个是tabBar中当前页对应的下标
  })
  }
  },