原生 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 里图标路径的硬性规则

哪怕你只想“静态换一批图”，也极易踩坑。所有路径和格式必须严格满足以下条件：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

• 路径必须以 static/ 开头，不能用 @/、./、../ 或变量拼接（如 "static/tabs/" + tab + "-active.png" ❌）
• 图标文件必须放在 static 目录下，不能在 assets 或 components 里
• iOS 要求 selectedIconPath 是纯 alpha 通道图（透明底 + 黑白），带灰阶或彩色会变灰甚至不可见
• 微信小程序要求 PNG 格式，不支持 SVG；尺寸建议统一为 81×81px（iOS）或 96×96px（Android）
• 改完记得删掉 unpackage/ 目录再重新运行，否则旧缓存图标可能残留

真要“动态换图”？只能手写自定义 TabBar

放弃原生 tabBar 配置，用 <view></view> + <image></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 的约束。