uni-app中隐藏tabbar

最新推荐文章于 2025-03-31 17:31:07 发布
最新推荐文章于 2025-03-31 17:31:07 发布
阅读量2.3w 收藏 22
点赞数 7
文章标签： vue.js javascript 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shgzzd/article/details/121873297
版权
当使用uni-app开发应用时，可能会遇到需要隐藏默认tabbar的情况。官方提供的uni.hideTabBar方法在小程序中有效，但在安卓app中无效。为了解决这个问题，可以在App.vue中调用该方法，并在安卓页面的生命周期函数内再次调用以确保隐藏效果。通过这种方法，可以成功在安卓app中隐藏tabbar。

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

uni-app在安卓中隐藏tabbar

在我们做一些小程序或者app的时候，默认的tabbar可能不能适用于我们app的排版或者布局，需要我们隐藏掉默认的

image-20211211143637806

官网上对于隐藏tabbar的api如上 uni.hideTabBar

image-20211211143739218

运用在App.vue中

但我们会发现一个问题，这样的写法在小程序中可以隐藏，但是在app中还是无法实现隐藏。

app中如果想实现效果，需要在页面的声明周期函数周再次引用一次即可。

image-20211211144013162

这样就ok啦

47071)]

这样就ok啦

沐言鸭
关注
uni-app——uniapp 自定义 tabbar 的使用
qq_43201350的博客
01-17 981
uni-app——uniapp 自定义 tabbar 的使用
uni-app 中的 tabBar
郭宝的博客
07-29 5322
uni-app 中的 tabBar
隐藏TabBar的一些方法小结
03-22
隐藏TabBar的一些方法小结 在项目中经常遇到隐藏tabBar,实力很多种方法，可以解决不同情况下问题
uniapp中如何隐藏tabbar
Vae2437426397的博客
09-05 1981
我们常常在登录界面是不显示tabbar的，所以有时需要隐藏起来- 调用的是uni.hideTabBar()来隐藏tabar- 调用uni.showTabBar()可以来显示隐藏的tabbar。
在uni-app中移除底部导航栏（tabBar）的上边框，可以通过以下步骤实现：
最新发布
m0_69538493的博客
03-31 256
移除底部导航栏（tabBar）的上边框。在App.vue样式中添加下列代码。如需适配不同平台代码如下。
uniapp配置隐藏导航栏
weixin_64427878的博客
02-19 446
uniapp配置隐藏导航栏
uniapp隐藏底部导航栏（非自定义底部导航栏）
Dream_Fever的博客
08-18 1987
【代码】uniapp隐藏底部导航栏（非自定义底部导航栏）
uniapp隐藏自带的tabBar
qq_41421033的博客
11-11 1051
场景: 微信小程序在使用自定义tabBar组件时, 隐藏uniapp自带的tabBar。
uniapp隐藏tabber
weixin_44286765的博客
03-30 1624
2、在遮罩层打开的同时隐藏tabbar，uni.hideTabBar();遮罩层关闭的同时显示tabbar，uni.showTabBar();1、使用自定义tabbar组件；uni-app学习踩坑集。
uniapp 隐藏某一个tabBar
XZ_gui的博客
07-10 592
【代码】uniapp 隐藏某一个tabBar。
在uniapp当中隐藏掉默认tabbar并且使用自己的tabbar
学习记录
11-13 2683
【代码】在uniapp当中隐藏掉默认tabbar并且使用自己的tabbar。
关于uni-app 在app中隐藏原生tabbar uni.hideTabBar()无效问题
qq_22475399的博客
03-14 3842
uni-app 隐藏tabbar uni.hideTabBar
uni-app 如何更换tabbar里面的图标
BradenHan的专栏
04-26 2170
TOC。
uni-app-tabbar:uni-app底部初步实现（不支持小程序）
03-19
- 文件结构：从"uni-app-tabbar-master"这个文件名来看，这是一个包含了源码的项目模板。开发者可以下载这个压缩包，解压后查看源代码，以了解具体的实现细节。 通过以上步骤，开发者可以在uni-app中创建一个功能...
uni-app网易云音乐实战
10-22
在本文中，我们将使用uni-app框架来开发一个网易云音乐应用程序，涵盖了从开发环境的搭建到项目的创建、运行、配置tabBar、首页静态页面、推荐歌单和最新音乐等内容。 开发环境的搭建 uni-app开发环境的搭建需要...
uniapp app tabbar 页面默认隐藏
zerlinda0913的博客
11-15 2552
visible:true //显示或隐藏。index: 1, //列表索引。visible 默认为true,设为false则是不显示。1.在page.json 中找到tabbar。
uniapp和小程序设置tabBar和显示与隐藏tabBar
qq_43235503的博客
09-10 7166
uniapp和小程序设置tabBar和显示与隐藏tabBar
关于uni-app中隐藏底部导航栏uni.hideTabbar()的使用
热门推荐
weixin_41979836的博客
06-01 1万+
关于uni-app中隐藏底部导航栏uni.hideTabbar()的使用及注意事项
uni-app—— uni-app 隐藏底部导航栏
qq_43201350的博客
12-11 1379
uni-app—— uni-app 隐藏底部导航栏
uniapp隐藏tabbar页面
01-17
### 如何在 UniApp 中隐藏 TabBar 为了实现在特定场景下隐藏 TabBar 的功能，在 `app.vue` 文件中的生命周期函数里调用 `uni.hideTabBar()` 方法可以达到目的。此方法用于隐藏原生底部标签栏，从而防止其显示并影响页面布局[^1]。 对于动态控制 TabBar 显示与隐藏的需求，可以在需要隐藏的地方通过 JavaScript 调用 API 来完成操作： ```javascript // 隐藏 tabBar 实现代码片段 export default { onShow() { uni.hideTabBar({ animation: true, success(res) { console.log('成功隐藏tabBar', res); }, fail(err) { console.error('隐藏失败', err); } }); } } ``` 当涉及到自定义弹出层覆盖默认 TabBar 场景时，除了上述方式外还需要注意调整 z-index 属性确保弹窗能正常浮于顶部而不被 TabBar 所遮挡[^3]。 另外值得注意的是，如果希望仅针对某些页面隐藏 TabBar，则应该考虑将这些特殊页面设计成非 TabBar 类型的页面；而对于整个应用范围内统一处理的情况则适合放在全局文件如 app.vue 内部进行配置[^2]。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值