Uni-App 多身份动态切换 TabBar 实战方案

注意：custom: true 是关键开关。即使某些 Tab 对特定角色隐藏，也建议保留路径声明。

2. 创建自定义 TabBar 组件

新建 components/custom-tabbar.vue。这里利用 Vuex 获取当前选中的索引和列表数据，动态渲染图标和文字。

<template>
  <view class="custom-tabbar">
    <view 
      v-for="(item, index) in tabbarList" 
      :key="index" 
      @click="switchTab(item, index)"
      class="tabbar-item"
    >
      <!-- 图标 -->
      <image 
        :src="currentIndex === index ? item.selectedIconPath : item.iconPath" 
        class="tabbar-icon"
      />
      <!-- 文字 -->
      <text :style="{ color: currentIndex === index ? selectedColor : color }">
        {{ item.text }}
      </text>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data() {
    return {
      color: '#999999',
      selectedColor: '#FF6000'
    }
  },
  computed: {
    ...mapState(['currentTabIndex', 'tabbarList']),
    currentIndex() {
      return this.currentTabIndex
    }
  },
  methods: {
    ...mapMutations(['updateTabIndex']),
    switchTab(item, index) {
      this.updateTabIndex(index)
      uni.switchTab({
        url: item.pagePath,
        fail(err) {
          console.error('切换 Tab 失败:', err)
        }
      })
    }
  }
}
</script>

<style scoped>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  height: 100rpx;
  background-color: #FFFFFF;
  border-top: 1rpx solid #EEEEEE;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 999;
}
.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.tabbar-icon {
  width: 48rpx;
  height: 48rpx;
}
.tabbar-text {
  font-size: 20rpx;
  margin-top: 8rpx;
}
</style>

3. 使用 Vuex 管理状态

将用户角色和 TabBar 配置存入 Store，这样登录或切换身份时能全局生效。

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import { adminTabBarConfig, userTabBarConfig, guestTabBarConfig } from '@/utils/tabbar-config.js'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userRole: null,
    currentTabIndex: 0,
    tabbarList: []
  },
  mutations: {
    setUserRole(state, role) {
      state.userRole = role
      switch (role) {
        case 'admin':
          state.tabbarList = adminTabBarConfig
          break
        case 'user':
          state.tabbarList = userTabBarConfig
          break
        default:
          state.tabbarList = guestTabBarConfig
      }
      uni.setStorageSync('USER_ROLE', role)
    },
    updateTabIndex(state, index) {
      state.currentTabIndex = index
    }
  },
  actions: {
    async login({ commit }, credentials) {
      try {
        const res = await uni.request({
          url: '/api/login',
          method: 'POST',
          data: credentials
        })
        const userInfo = res[1].data
        commit('setUserRole', userInfo.role)
        return userInfo
      } catch (error) {
        console.error('登录失败:', error)
        throw error
      }
    }
  }
})

4. 定义角色 TabBar 配置

将不同角色的菜单配置分离到单独文件，便于维护。

// utils/tabbar-config.js
export const adminTabBarConfig = [
  { pagePath: "/pages/home/index", iconPath: "/static/tabbar/home.png", selectedIconPath: "/static/tabbar/home-active.png", text: "首页" },
  { pagePath: "/pages/order/index", iconPath: "/static/tabbar/order.png", selectedIconPath: "/static/tabbar/order-active.png", text: "订单管理" },
  { pagePath: "/pages/admin/setting/index", iconPath: "/static/tabbar/setting.png", selectedIconPath: "/static/tabbar/setting-active.png", text: "系统设置" },
  { pagePath: "/pages/profile/index", iconPath: "/static/tabbar/profile.png", selectedIconPath: "/static/tabbar/profile-active.png", text: "我的" }
]

export const userTabBarConfig = [
  { pagePath: "/pages/home/index", iconPath: "/static/tabbar/home.png", selectedIconPath: "/static/tabbar/home-active.png", text: "首页" },
  { pagePath: "/pages/order/index", iconPath: "/static/tabbar/order.png", selectedIconPath: "/static/tabbar/order-active.png", text: "我的订单" },
  { pagePath: "/pages/profile/index", iconPath: "/static/tabbar/profile.png", selectedIconPath: "/static/tabbar/profile-active.png", text: "个人中心" }
]

export const guestTabBarConfig = [
  { pagePath: "/pages/home/index", iconPath: "/static/tabbar/home.png", selectedIconPath: "/static/tabbar/home-active.png", text: "首页" },
  { pagePath: "/pages/login/index", iconPath: "/static/tabbar/login.png", selectedIconPath: "/static/tabbar/login-active.png", text: "登录" }
]

5. 在页面中使用自定义 TabBar

以首页为例，记得在每个 Tab 页面的 onShow 中同步索引，确保高亮正确。

<!-- pages/home/index.vue -->
<template>
  <view class="container">
    <text>首页内容</text>
    <custom-tabbar />
  </view>
</template>

<script>
import CustomTabbar from '@/components/custom-tabbar.vue'

export default {
  components: { CustomTabbar },
  onShow() {
    // 同步当前页面索引，确保 Tab 高亮正确
    this.$store.commit('updateTabIndex', 0)
  }
}
</script>

<style scoped>
.container {
  padding-bottom: 120rpx; /* 为 TabBar 预留空间 */
}
</style>

6. 登录后切换身份

登录成功后触发 Action，更新 Store 中的角色和 TabBar 配置。

<!-- pages/login/index.vue -->
<script>
export default {
  data() {
    return {
      loginForm: { username: '', password: '' }
    }
  },
  methods: {
    async handleLogin() {
      try {
        await this.$store.dispatch('login', this.loginForm)
        uni.showToast({ title: '登录成功' })
        uni.reLaunch({ url: '/pages/home/index' })
      } catch (error) {
        uni.showToast({ title: '登录失败', icon: 'none' })
      }
    }
  }
}
</script>

实践技巧与常见问题

1. 解决 TabBar 高亮不同步

每个 Tab 页面的 onShow 都需要手动提交索引更新，否则点击后可能不跳转或不高亮。

onShow() {
  this.$store.commit('updateTabIndex', 0) // 根据实际索引设置
}

2. 防止首次加载闪烁

在 app.vue 的 onLaunch 中读取本地缓存的角色信息并初始化 Store，避免页面渲染前状态为空导致的闪烁。

// app.vue
export default {
  onLaunch() {
    const role = uni.getStorageSync('USER_ROLE') || 'guest'
    this.$store.commit('setUserRole', role)
  }
}

3. 适配安全区域

CSS 中已包含 safe-area-inset-bottom 处理，确保 iPhone X 等机型的底部黑条不会遮挡 TabBar。

4. 图标资源管理

建议将图标统一放在 /static/tabbar/ 目录，命名遵循 功能名.png 和 功能名-active.png 规范，方便后续替换 SVG 或字体图标。

总结

通过自定义组件配合 Vuex 状态管理，可以完美实现多身份动态切换 TabBar。核心在于权限控制与状态同步，新增角色只需添加配置即可，无需修改组件逻辑。若未来需要支持 H5 或 App 端，建议将此架构封装为跨平台组件以提升复用性。