uni.hideTabBar()需在onReady中调用且禁用动画,pages.json配置优先但分平台生效;所有tabBar页面onShow必须显式调用uni.showTabBar({animation:false}),自定义tabBar仍需全局隐藏防闪屏。

uni.hideTabBar() 不能随便调就生效,得看平台、时机和配置是否匹配。直接在 onLoad 里调用,大概率会闪一下再消失;写在 pages.json 里配错位置,可能完全不生效;没配合 uni.showTabBar() 恢复,返回 tabbar 页面后就永远没了。
pages.json 配置优先级最高,但分平台生效
想彻底避免闪屏,必须在页面加载前就告诉框架“这个页面不要原生 tabBar”:
- 非 tabbar 页面(如登录页、弹窗页):在
pages.json对应页面路径下加"tabBar": false—— 这个对 App、H5、小程序三端都管用,且优先级高于 JS API - APP 端 tabbar 页面需局部隐藏:在该页面
style下加"app-plus": {"tabBar": {"visible": false}} - 微信小程序/H5 的 tabbar 页面无法通过
pages.json隐藏原生 tabBar,必须靠 JS 控制,但不能写在onLoad,得等视图树挂载完成
JS 控制必须用 onReady + animation: false
uni.hideTabBar() 在 onLoad 或 onShow 调用,页面刚渲染完才去“擦除”,用户会看到半秒原生 tabBar 闪现。真正及时的时机是 onReady:
- 小程序/H5:在
onReady中调用uni.hideTabBar({ animation: false }),此时 native tabBar 尚未 fully attached,隐藏更早 - APP 端即使配了
pages.json,也建议在onReady补一次uni.hideTabBar({ animation: false }),兜底防厂商机兼容问题 - 别用
animation: true——过渡动画反而会让隐藏过程更明显,尤其在低端机上
showTabBar 必须在每个 tabbar 页面 onShow 中显式恢复
从非 tabbar 页面(如登录页)用 uni.switchTab 回到首页,如果首页没在 onShow 里调 uni.showTabBar(),tabBar 就不会出现——因为 uni.showTabBar() 只对当前活跃页面生效,且不自动继承上一个页面的状态:
- 所有被
tabBar管理的页面(即pages.json中tabBar.list包含的路径),都要在onShow里写uni.showTabBar({ animation: false }) - 不要只写在
onLoad:页面被缓存时onLoad不触发,onShow才是每次进入的可靠入口 - 自定义 tabBar 也要调:即使开了
"custom": true,iOS 和部分安卓机仍会短暂显示原生 tabBar,不 hide 就会闪两下
自定义 tabBar 场景下,hideTabBar 仍不可省略
很多人以为开了 "custom": true 就万事大吉,其实不是。原生 tabBar 的渲染逻辑独立于 Vue 实例,在某些平台(尤其是 iOS 微信小程序)中,它会在自定义组件 mount 前先 flash 一下。所以:
- 必须在
app.vue的onLaunch和onShow中都执行uni.hideTabBar({ animation: false }),全局压制 - 自定义 tabBar 组件内部不要依赖
uni.getTabBar()——开启custom: true后这个 API 返回undefined - 状态同步用
uni.onTabItemTap监听,别用getCurrentPages()判断当前 tab,容易误判
hideTabBar,只影响当前页面;切走再切回来,原生层不会记住你之前关过。所以每个需要它的页面,都得自己负责开和关。


















