关于uni-app中隐藏底部导航栏uni.hideTabbar()的使用

最新推荐文章于 2025-03-26 08:14:21 发布

帅气的码龙

最新推荐文章于 2025-03-26 08:14:21 发布

阅读量1.3w

点赞数 7

文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_41979836/article/details/130992428

版权

文章详细介绍了uni.hideTabBar的使用场景和方法，包括在不同页面类型下的调用时机，如在App.vue的onShow生命周期或页面的onShow事件中。同时提到了在小程序中的特殊配置和可能遇到的错误信息，如errMsg:hideTabBar:failnotTabBarpage和errMsg:hideTabBar:failcustomTabBar。还给出了处理uni.switchTab跳转后隐藏底部栏不生效的解决策略和在显示弹框时隐藏底部栏的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：对于自定义导航栏，以及在底部对应页面需要显示自定义弹框从而隐藏底部的情况。

首先我们来看官网介绍：uni.setTabBarItem(OBJECT) | uni-app官网

官网介绍结束，但官网没有介绍在哪调用以及不同地方调用会不会出错的问题。

使用方式：

情况一：如果pages里面的第一个页面是底部导航栏页面的，在App.vue的onShow生命周期调用即可

情况二：如果pages里面的第一个页面不是底部导航栏页面的，需要在对应页面的onShow调用，当然如果你们觉得在App.vue加入也行，但运行小程序可能会报"errMsg": "hideTabBar:fail not TabBar page"错误,意思就是“隐藏失败，不在导航栏页面”，如下：

情况三：如果只是编译成小程序，可以在pages的tabbar配置里加上了"costom":true的配置，此配置在小程序生效，注意：使用此配置，自定义底部时无需调用uni.hideTabbar()，因为调用会报"errMsg": "hideTabBar:fail customTabBar"错误，意思是"隐藏失败，tabbar是自定义的"，如下

针对第二种情况，如果大家不想每个页面都写uni.hideTabbar()的话，大家使用条件编译，将情况二和三结合起来使用，就是在配置加上"costom":true，然后再在App.vue的onShow里面写个条件编译，不是运行在小程序时再加入代码uni.hideTabbar()，如下：

Tips

1、如果使用 uni.switchTab 跳转后 uni.hideTabBar()不生效的，可以尝试在uni.switchTab回调方法里面调用 uni.hideTabBar 方法

uni.switchTab({
    url:'xxx',
    success:res=>{
        uni.hideTabBar()
    }
})

2、如果在页面中显示弹框要隐藏底部uni.hideTabBar() 和 uni.showTabBar()不生效的，可以尝试在nextTick中使用，或加个延迟

以上就是uni.hideTabBar的使用及注意事项，如有错误，欢迎各位大佬指出并补充。