微信小程序实现根据不同的用户角色显示不同的tabbar并且可以完整的切换tabbar

一、基础配置与架构设计

启用自定义TabBar
在app.json中配置"custom": true，同时将所有可能用到的页面路径预先声明：

{
  "tabBar": {
    "custom": true,
    "list": [
      {"pagePath": "pages/user/home"},
      {"pagePath": "pages/admin/dashboard"},
      // 其他所有角色可能用到的页面路径
    ]
  }
}

二、核心实现逻辑

1. 角色数据动态加载

// custom-tab-bar/index.js
Component({
  data: {
    roleTabs: {
      user: [
        {pagePath: "/pages/user/home", text: "首页"},
        {pagePath: "/pages/user/profile", text: "我的"}
      ],
      admin: [
        {pagePath: "/pages/admin/dashboard", text: "控制台"},
        {pagePath: "/pages/admin/analytics", text: "数据统计"}
      ]
    },
    currentRole: 'user' // 初始默认角色
  },
   
  lifetimes: {
    attached() {
      const role = wx.getStorageSync('userRole') || 'user'
      this.setData({ currentRole: role })
    }
  }
})

2. 动态切换逻辑

methods: {
  switchRole(roleType) {
    this.setData({ currentRole: roleType })
    wx.setStorageSync('userRole', roleType)
    // 跳转到该角色的默认首页
    const defaultPath = this.data.roleTabs[roleType][0].pagePath
    wx.switchTab({ url: defaultPath })
  }
}

三、关键问题解决方案

1. 选中状态同步问题

在每个Tab页面的onShow生命周期同步选中状态：

// pages/user/home.js
Page({
  onShow() {
    if (this.getTabBar?.()) {
      this.getTabBar().setData({
        selectedIdx: 0 // 当前页面在tab数组中的索引
      })
    }
  }
})

2. 超过5个Tab的解决方案

通过横向滚动实现超量Tab展示：

<!-- custom-tab-bar/index.wxml -->
<scroll-view scroll-x class="tab-container">
  <view      wx:for="{{roleTabs[currentRole]}}"  =""     class="tab-item {{selectedIdx === index ? 'active' : ''}}"     bindtap="switchTab"     data-path="{{item.pagePath}}"   ="">
    {{item.text}}
   
</view ></scroll-view scroll-x class="tab-container">

3. 多角色权限管理

// utils/auth.js
export function checkTabPermission(role) {
  const permissions = {
    user: ['home', 'profile'],
    admin: ['dashboard', 'analytics', 'settings']
  }
  return permissions[role] || []
}