uni-app 底部 tabBar 无法真正动态切换，因原生配置编译期固定，运行时仅支持 uni.setTabBarItem 局部修改文字/图标/高亮，无法增删项、改顺序或路径，且存在白屏、iOS高亮不同步、index硬编码、不触发生命周期等问题；必须启用 custom: true 并用自定义组件（如u-tabbar+Vuex）实现角色驱动的完整动态控制。
uni-app 底部 tabBar 无法真正“动态切换”——原生配置是编译期固定的，运行时只能局部微调，想按角色增删项、改图标、换路径，必须放弃原生 tabBar，走自定义组件路线。
为什么 uni.setTabBarItem 不够用
这个 API 只能改单个 tab 的文字、图标、是否高亮，但不能新增/删除 tab，也不能改变顺序或跳转路径。更关键的是：调用后页面会短暂白屏，且 iOS 上容易出现高亮不同步（点击了 A 项，A 没亮，B 亮了）。
-
uni.setTabBarItem必须传index，而 index 是硬编码的，权限变化后结构一变就错位 - 它不触发
onTabItemTap生命周期，你无法监听到用户点的是哪个动态项 - 所有 tab 页面仍需在
pages.json的tabBar.list中预先声明，否则uni.switchTab会失败
启用自定义 tabBar 的正确配置
核心是让 uni-app 放弃渲染原生底部栏，把控制权交给你写的 Vue 组件。这一步漏掉，后面全白搭。
- 在
pages.json的tabBar节点下加"custom": true -
tabBar.list仍要填全所有可能用到的 tab 页面路径（哪怕某些角色看不到），否则uni.switchTab报错page path is not found - 图标资源建议统一放
static/tabbar/下，避免路径拼错导致图标不显示
{
"tabBar": {
"custom": true,
"list": [
{"pagePath": "pages/home/index"},
{"pagePath": "pages/log/index"},
{"pagePath": "pages/auth/index"},
{"pagePath": "pages/inventory/index"},
{"pagePath": "pages/profile/index"}
]
}
}
用 u-tabbar + Vuex 实现角色驱动的切换
uview 的 u-tabbar 是目前最省心的选择：支持传入任意长度的 list 数组、可绑定 v-model、提供 before-switch 钩子拦截跳转、自带高亮和动画。
- 不同角色的 tab 配置（含
pagePath、text、iconPath）存在utils/tabbar.js里，按需导出 - Vuex store 里存一个
currentRole和activeTab，tabbar 组件 watch 这两个值自动重绘 - 点击 tab 时，先
uni.switchTab({url: item.pagePath})，再更新activeTab，避免手动跳转后高亮不同步 - 注意：iOS 安全区域底部有留白，
u-tabbar默认没适配，得加padding-bottom: env(safe-area-inset-bottom)
首次加载闪烁和高亮不同步怎么破
这是自定义 tabbar 最常被卡住的点：页面刚进，tabbar 还没拿到用户角色，就按默认配置渲染了一次，等 vuex 数据回来又重绘，肉眼可见闪一下。
- 在 App.vue 的
onLaunch里先发请求拿用户角色，再uni.reLaunch到首页，确保 tabbar 初始化时已有准确数据 - 不要在 tabbar 组件里直接读取
store.state，改用mapState并配合computed缓存，减少响应式依赖抖动 - 高亮不同步大概率是因为
uni.switchTab成功回调没等到就更新了v-model，建议加个nextTick延迟赋值
真正难的不是写几个 tab 切换，而是让每个角色进入时，tabbar 的状态、图标、跳转、高亮、安全区、生命周期全部对齐——这些细节不抠，上线后用户第一眼就感觉到“卡”“闪”“点错了”。
