obaby@mars ·

Uniapp 动态调整 Tabbar 菜单

💡 原文中文，约2000字，阅读约需5分钟。

📝

内容提要

软件开发功能从无到有，从少到多。现在进入从多到少的阶段，优化功能，提升用户体验。姨妈记录更多人习惯自己记录，不分享数据。想简化用户界面，隐藏tabbar中间闺蜜功能。通过uni.setTabBarItem()动态控制中间图标是否显示。参数说明：index-哪一项，text-按钮文字，iconPath-图片路径，selectedIconPath-选中时的图片路径。

🔎

延伸解读

动态控制 TabBar 的适用场景

文章以姨妈记录应用为例，说明当产品进入功能精简阶段时，可通过动态隐藏 TabBar 中的特定项来简化界面。这种方法适合需要根据用户模式或权限调整菜单，但又不希望维护多套 TabBar 列表的场景。

使用 uni.setTabBarItem 的注意事项

uni.setTabBarItem 的 visible 属性可控制某一项是否显示，但该接口必须在带有 TabBar 的页面调用，否则会报错。文章建议将设置逻辑放在用户页面，并通过 unistorage 存储配置，在 onShow 中读取并动态调整，避免在无 TabBar 页面直接调用。

平台兼容性与参数限制

文章列出了 uni.setTabBarItem 的平台差异：visible 属性仅支持 App 和 H5（版本要求分别为 3.2.10+），其他平台可能不支持。此外，iconPath 和 selectedIconPath 有大小和尺寸限制，网络图片仅部分平台支持，使用时需注意兼容性。

❓

Q&A

Uniapp 中如何动态隐藏 tabbar 的某一项？

使用 uni.setTabBarItem() 接口，设置 visible 属性为 false 即可隐藏指定项。例如：uni.setTabBarItem({ index: 1, visible: false })。

uni.setTabBarItem() 的 visible 参数有什么作用？

visible 参数用于控制 tabBar 某一项是否显示，默认值为 true。设置为 false 时该项会被隐藏。

为什么在非 tabbar 页面调用 uni.setTabBarItem() 会报错？

因为 uni.setTabBarItem() 只能在带有 tabbar 的页面中调用，在没有 tabbar 的页面设置相关属性会直接报错，提示 'setTabBarBadge:fail not TabBar page'。

如何通过配置存储来动态调整 tabbar 菜单？

在配置页面通过 uni.setStorageSync 存储配置，然后在需要调整 tabbar 的页面的 onShow 生命周期中读取配置，并调用 uni.setTabBarItem() 动态调整菜单。

除了 visible，uni.setTabBarItem() 还支持哪些参数？

还支持 index（哪一项）、text（按钮文字）、iconPath（图片路径）、selectedIconPath（选中时图片路径）、pagePath（页面路径）、iconfont（字体图标）以及 success、fail、complete 回调函数。