微信小程序自定义底部tabbar,根据权限显示不同名称或者不同个数的tabbar及部分出现的问题

对于自定义底部tabbar，可以通过在app.json文件中设置"tabBar"字段来实现。例如：

"tabBar": {
  "color": "#999999",
  "selectedColor": "#333333",
  "backgroundColor": "#ffffff",
  "list": [{
    "pagePath": "pages/home/home",
    "text": "首页",
    "iconPath": "images/home.png",
    "selectedIconPath": "images/home-selected.png"
  }, {
    "pagePath": "pages/category/category",
    "text": "分类",
    "iconPath": "images/category.png",
    "selectedIconPath": "images/category-selected.png"
  }, {
    "pagePath": "pages/cart/cart",
    "text": "购物车",
    "iconPath": "images/cart.png",
    "selectedIconPath": "images/cart-selected.png"
  }, {
    "pagePath": "pages/mine/mine",
    "text": "我的",
    "iconPath": "images/mine.png",
    "selectedIconPath": "images/mine-selected.png"
  }]
}

如果需要根据权限显示不同名称或者不同个数的tabbar，可以在页面初始化时根据权限动态配置"tabBar"字段，然后调用wx.setTabBar方法更新tabbar。例如：

wx.getStorage({
  key: 'userRole',
  success(res) {
    if (res.data === 'admin') {
      wx.setTabBar({
        list: [{
          "pagePath": "pages/home/home",
          "text": "首页",
          "iconPath": "images/home.png",
          "selectedIconPath": "images/home-selected.png"
        }, {
          "pagePath": "pages/category/category",
          "text": "分类",
          "iconPath": "images/category.png",
          "selectedIconPath": "images/category-selected.png"
        }, {
          "pagePath": "pages/cart/cart",
          "text": "购物车",
          "iconPath": "images/cart.png",
          "selectedIconPath": "images/cart-selected.png"
        }, {
          "pagePath": "pages/order/order",
          "text": "订单",
          "iconPath": "images/order.png",
          "selectedIconPath": "images/order-selected.png"
        }, {
          "pagePath": "pages/mine/mine",
          "text": "我的",
          "iconPath": "images/mine.png",
          "selectedIconPath": "images/mine-selected.png"
        }]
      })
    } else {
      wx.setTabBar({
        list: [{
          "pagePath": "pages/home/home",
          "text": "首页",
          "iconPath": "images/home.png",
          "selectedIconPath": "images/home-selected.png"
        }, {
          "pagePath": "pages/category/category",
          "text": "分类",
          "iconPath": "images/category.png",
          "selectedIconPath": "images/category-selected.png"
        }, {
          "pagePath": "pages/cart/cart",
          "text": "购物车",
          "iconPath": "images/cart.png",
          "selectedIconPath": "images/cart-selected.png"
        }, {
          "pagePath": "pages/mine/mine",
          "text": "我的",
          "iconPath": "images/mine.png",
          "selectedIconPath": "images/mine-selected.png"
        }]
      })
    }
  }
})

需要注意的是，调用wx.setTabBar方法更新tabbar时，除了"list"字段之外，其他字段必须和原来的设置保持一致，否则会出现一些显示问题，比如"color"、"selectedColor"、"backgroundColor"等。另外，如果tabbar中的某些页面需要根据条件隐藏，可以在onShow生命周期中调用wx.hideTabBar或wx.showTabBar方法来实现。