原生 tabBar 不支持运行时动态换图标，uni.setTabBarItem 无法修改 iconPath 和 selectedIconPath，因微信小程序和 App 端强制编译时确定图标路径；需改用自定义 TabBar 实现动态需求。
原生 tabBar 不支持运行时动态换图标，所谓“动态修改”在绝大多数场景下是伪需求——你真正需要的，是自定义 TabBar。
为什么 uni.setTabBarItem 改不了图标
这个 API 只能改文字、颜色、是否显示，不能改 iconPath 和 selectedIconPath。微信小程序和 App 端底层限制死的：图标路径必须在编译时确定，运行时 JS 无法注入新资源路径。
- 调用
uni.setTabBarItem({ index: 0, iconPath: 'static/tabs/home-new.png' })后图标毫无变化，控制台也无报错 - 部分 Android 机型会短暂闪一下旧图标，然后回退到文字（因为路径无效）
- 即使路径正确，iOS 会直接忽略 —— 它只认
pages.json里写死的那两个字段
pages.json 里图标路径的硬性规则
哪怕你只想“静态换一批图”，也极易踩坑。所有路径和格式必须严格满足以下条件：
- 路径必须以
static/开头，不能用@/、./、../或变量拼接（如"static/tabs/" + tab + "-active.png"❌） - 图标文件必须放在
static目录下，不能在assets或components里 - iOS 要求
selectedIconPath是纯 alpha 通道图（透明底 + 黑白），带灰阶或彩色会变灰甚至不可见 - 微信小程序要求 PNG 格式，不支持 SVG；尺寸建议统一为 81×81px（iOS）或 96×96px（Android）
- 改完记得删掉
unpackage/目录再重新运行，否则旧缓存图标可能残留
真要“动态换图”？只能手写自定义 TabBar
放弃原生 tabBar 配置，用 <view> + <image> + v-for 实现完全可控的底部栏：
- 在
pages.json中关闭原生 tabBar："tabBar": { "list": [] }（或直接删掉整个tabBar节点） - 新建一个公共组件（如
custom-tabbar.vue），用props.current控制高亮项，:src绑定图标路径（此时可自由用变量、计算属性、vuex state） - 每个页面底部
<custom-tabbar :current="0"></custom-tabbar>，配合uni.switchTab跳转 - H5 端注意加
position: fixed; bottom: 0;和 z-index，避免被键盘顶起或层级遮挡
中间凸起、红点、权限切换等复杂需求的现实代价
自定义 TabBar 是唯一解，但别忽略它带来的隐性成本：
- 失去微信小程序的“首页”快捷入口（长按 home 图标呼出最近页）
- 页面不会自动缓存：原生 tabBar 切换只触发
onShow，而自定义需手动管理组件v-if或 keep-alive - App 端 iOS 上若用
position: fixed，可能在某些系统版本出现滚动穿透或闪烁，得加transform: translateZ(0)强制 GPU 加速 - 如果用 uView 的
u-tabbar，它内部仍是基于 view 实现，同样不支持原生图标替换逻辑，只是封装了样式和事件
最常被忽略的一点：**图标资源不是“换一张图”就完事，而是整套渲染链路（路径解析 → 原生加载 → alpha 合成 → 缩放采样）都在不同平台有独立规则。** 想绕过这些，就得彻底脱离原生 tabBar 的约束。
