微信小程序根据不同用户切换不同`TabBar`，简单易懂

原创

已于 2022-05-20 15:40:53 修改 · 置顶 · 1.8w 阅读

111

334 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

于 2020-12-19 21:32:01 首次发布

现有需求：小程序用户有三种身份（公众、运维人员、领导），根据不同用户身份显示不同的`tabbar`

众所周知微信小程序全局文件app.json里面的"tabBar"里面的list只能放置2-5个，要想实现3个tabbar,必须得复用tabbar,三种身份都需要个人中心，剩下的是长列表（两个），表单，图表刚好是5个，废话少说，上代码

代码有点长，建议仔细看一下

1全局.`app.json`

tabbar里面的sustom要设置为true

"custom": true,

{
   
   
  "pages": [
    xxxxxx:xxxxxx
   
  ],
  "window": {
   
   
   xxxxxxxxx
  },
  "tabBar": {
   
   
    "custom": true,
    "color": "#7A7E83",
    "selectedColor": "#d81e06",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
   
   
        "pagePath": "pages/Users/myrepaire/myrepaire",
        "text": "我要报修",
        "iconPath": "/images/tabbar/weixiu1.png",
        "selectedIconPath": "/images/tabbar/weixiu2.png"
      },
      {
   
   
        "pagePath": "pages/Users/myMalfunction/myMalfunction",
        "text": "我的故障",
        "iconPath": "/images/tabbar/myweixiu1.png",
        "selectedIconPath": "/images/tabbar/myweixiu2.png"
      },
      {
   
   
        "pagePath": "pages/logs/logs",
        "text": "个人中心",
        "iconPath": "/images/tabbar/user1.png",
        "selectedIconPath": "/images/tabbar/user2.png"
      },
      {
   
   
        "pagePath": "pages/weixiu/myweixiu/myweixiu",
        "text": "我的维修",
        "iconPath": "/images/tabbar/myweixiu1.png",
        "selectedIconPath": "/images/tabbar/myweixiu1.png"
      },
      {
   
   
        "pagePath": "pages/charts/charts",
        "text": "故障报表",
        "iconPath": "/images/tabbar/chart1.png",
        "selectedIconPath": "/images/tabbar/chart2.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}