uni-app 的 tabBar 不能动态修改是因为微信小程序原生不支持运行时增删 tab 或改顺序，uni.setTabBarItem 等仅支持视觉属性调整；需用 custom-tab-bar 自定义实现，并严格对齐路径、缓存与响应式状态。
uni-app 中 tabBar 为什么不能动态修改？
微信小程序原生不支持运行时修改 tabBar 配置，uni-app 的 uni.setTabBarItem 和 uni.setTabBarStyle 只能改图标、文字颜色、背景色等视觉属性，无法增删 tab 项或改变其顺序——这是底层限制，不是 uni-app 实现不到位。
真正需要「动态底部菜单」（比如登录前后菜单不同、权限控制显示隐藏某 tab），必须绕过原生 tabBar，用自定义组件模拟。
用 custom-tab-bar 替代原生 tabBar 的实操要点
微信小程序从基础库 2.1.0 起支持自定义 tabBar，uni-app 也封装了对应能力。关键不是“怎么写组件”，而是“怎么配、怎么触发、怎么同步状态”：
- 在
pages.json中必须设置"tabBar": { "custom": true }，否则custom-tab-bar目录不会被识别 - 组件路径必须是
components/custom-tab-bar/index.vue（注意大小写和文件名），且需在每个使用 tabBar 的页面的json里显式声明"usingComponents"引入 - 组件内用
uni.getTabBar()获取当前 tab bar 实例，但仅在真机或开发者工具真机调试下有效；模拟器里返回undefined - 切换 tab 必须手动调用
uni.switchTab({ url: '/pages/xxx' })，不能依赖点击事件自动跳转
uni.switchTab 跳转后如何保持 tab 状态高亮？
自定义 tabBar 没有自动高亮逻辑，得自己维护当前激活项。常见错误是只改 UI 样式，没同步页面栈或路由状态，导致「点着高亮，切页后变灰」：
- 在组件
onLoad或onShow钩子中，用uni.getStorageSync('currentTab')或getCurrentPages()推断当前页面路径，再匹配配置项中的pagePath - 不要用
data存高亮索引，而要用computed动态计算：比如computed: { activeIndex() { return this.tabList.findIndex(i => i.pagePath === this.currentPage) } } - 如果涉及登录态变化（如未登录时隐藏「我的」tab），记得在登录成功后调用
this.$forceUpdate()或重置tabList数据，否则视图不响应
权限类动态菜单最容易漏掉的兼容处理
比如「用户 A 可见 4 个 tab，用户 B 只可见 2 个」，除了渲染逻辑，还有三个隐蔽坑点：
- 页面路由仍需在
pages.json的pages数组中完整声明，否则uni.switchTab会报错page is not found - tabBar 图标资源（
iconPath/selectedIconPath）路径必须是本地绝对路径，不能用网络地址或条件拼接的相对路径，否则真机不显示 - App 端和 H5 端不支持
custom-tab-bar，必须在组件内部加平台判断：v-if="uni.getSystemInfoSync().platform === 'ios' || uni.getSystemInfoSync().platform === 'android'"，否则编译到 App 会白屏
动态 tabBar 的核心不在“动”，而在“稳”——所有状态变更都要落到页面路径、本地缓存、组件响应式三者的严格对齐上。少一步，就可能点不动、不亮、闪退或跨平台异常。
