uni——底部导航栏隐藏单个

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

耶啵奶膘

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

阅读量1.9k

点赞数

文章标签： uni-app

本文链接：https://blog.csdn.net/xulihua_75/article/details/130386575

版权

在uni-app中，通过调用uni.showTabBar方法和uni.setTabBarItem方法，可以实现底部导航栏的动态隐藏。具体操作是先显示底部导航栏，然后分别设置第一个和第三个模块的可见性为false，从而达到隐藏这两个模块的效果。

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

案例说明

假设底部导航栏有4个模块，我想隐藏其中第一个和第三个。需要显示之后才能隐藏

uni.showTabBar()
uni.setTabBarItem({
	index: 0,
	visible: false
})
uni.setTabBarItem({
	index: 2,
	visible: false
})

网址：
https://uniapp.dcloud.net.cn/api/ui/tabbar.html#settabbaritem

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

耶啵奶膘

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uniapp隐藏底部导航栏（非自定义底部导航栏）

Dream_Fever的博客

08-18

1992

【代码】uniapp隐藏底部导航栏（非自定义底部导航栏）

uniapp 小程序根据角色变更tabbar个数

03-22

uniapp 小程序根据角色变更tabbar个数

参与评论您还未登录，请先登录后发表或查看评论

uniapp和小程序设置tabBar和显示与隐藏tabBar

qq_43235503的博客

09-10

7183

uniapp和小程序设置tabBar和显示与隐藏tabBar

uniapp 去除顶部导航栏（隐藏导航栏）

最新发布

Binglianxiaojiao的博客

03-26

1243

开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。在具体路由下面的style中配置 "navigationStyle":"custom"3、根据平台去除导航栏（举例H5端）全部配置都在page.json文件。1、全平台去除导航栏。2、单页面去除导航栏。

uniapp真机调试app动态显示隐藏tabbar某一项

Rio_Gaven的博客

03-27

2078

3.测试app有效，微信开发者工具模拟器上没有效果。

uniapp 隐藏某一个tabBar

XZ_gui的博客

07-10

596

【代码】uniapp 隐藏某一个tabBar。

uni-app-tabbar:uni-app底部初步实现（不支持小程序）

03-19

uni-app-tabbar uni-app底部逐步实现（不支持小程序），请使用真机调试ok app效果图如下：安装包如下：

微信小程序uniappvue3版本-控制tabbar某一个的显示与隐藏

m0_61368323的博客

09-07

1636

直接把微信小程序文档里面的四个文件复制到自己项目中就可以了。

uniapp中如何隐藏tabbar

Vae2437426397的博客

09-05

1986

我们常常在登录界面是不显示tabbar的，所以有时需要隐藏起来- 调用的是uni.hideTabBar()来隐藏tabar- 调用uni.showTabBar()可以来显示隐藏的tabbar。

uni——底部弹框显示，底部导航隐藏

努力、拼搏、奋进

10-21

3145

uni——底部弹框显示，底部导航隐藏

uni-app自定义底部tabbar实现某个tab的显示和隐藏

erduoduo520的专栏

09-08

4036

自定义的tabbar可用v-if实现某个tab的显示和隐藏页面 <view class="tab-box row acenter"> <navigator class="grow1 column acenter jcenter" url="/pages/index/index" open-type="redirect"> <image src="@/static/images/tab_home_nor.png"></image>

uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip

12-17

"uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip" 是一个针对uni-app框架的项目，其核心功能是实现自定义底部导航栏。uni-app是一个多端开发框架，允许开发者使用一套代码生成包括iOS、Android、H5...

Uniapp 底部导航栏 自定义 tabBar 全端全页面引用跳转组件

09-23

自定义tabbar底部导航栏，简洁，方便，二开使用教程将组件拷贝到uni_modules目录内，然后其他页面进行引用即可 <TC-tabBar :zhi="zhi"></TC-tabBar> </template>

底部导航栏中间圆形按钮凸起效果demo

07-04

在Android应用开发中，设计一个用户友好的界面是至关重要的，底部导航栏（Bottom Navigation Bar）就是其中一种常见的设计模式，它能帮助用户快速切换不同的功能模块。标题“底部导航栏中间圆形按钮凸起效果demo”所...

uni app 自定义底部导航栏uni-app-bottom-navigation-master（小程序）

04-10

本文将详细介绍如何使用uni-app框架来创建一个自定义底部导航栏，并利用swipe组件实现左右滑动切换页面的功能。 uni-app是一个多端开发框架，它允许开发者用一套代码编写应用，然后发布到iOS、Android、H5、小程序...

uni-app隐藏某项tabbar-已解决

qq_42306286的博客

08-05

7618

首先Uni-app不支持增删某项tabbar，所以增删效果只能用自定义组件。这个方法使用于 tabbar的不同角色的菜单一样多或者相差两项。比如一个菜单3项，一个菜单五项。或者24 。以五项和三项局里。 A角色有五个菜单，B角色有三个菜单。在page.json中设置tabBar的list为含五个空项的list即 [{}],{},{},{},{}]，如果是五项，则用uni.setTabBarItem分别设置这5项的信息，如果是三项，则设置第1,3,5项的信息，24不设置，这样的效果看起

uniapp配置隐藏导航栏

weixin_64427878的博客

02-19

447

uniapp配置隐藏导航栏

uniapp设置隐藏原生导航栏(3)

m0_65607651的博客

01-23

3402

uniapp设置隐藏原生导航栏

uni-app—— uni-app 隐藏底部导航栏

qq_43201350的博客

12-11

1380

uni-app—— uni-app 隐藏底部导航栏

uniapp系统底部导航栏隐藏

01-17

### 实现 UniApp 底部导航栏隐藏的方法 #### 方法一：通过生命周期函数 `onLaunch` 隐藏底部导航栏 在 App.vue 文件中利用应用启动时的生命周期钩子来调用 API 函数 `uni.hideTabBar()` 来达到目的。 ```javascript export default { onLaunch: function () { console.log('App Launch'); uni.hideTabBar({}); } } ``` 此方法适用于希望在整个应用程序初始化阶段就立即隐藏 TabBar 的场景[^1]。 #### 方法二：配置 pages.json 自定义页面样式对于特定页面可以修改其对应的页面配置文件，设置 `"navigationStyle"` 属性为 `"custom"` ，从而改变该页面顶部导航条的表现形式；需要注意的是这种方式主要影响的是顶部而非底部的导航组件。 ```json { "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "", "navigationStyle": "custom" } }, ... ] } ``` 虽然这不会直接影响到底部 tab bar 的显示状态，但对于某些布局设计来说可能是必要的调整措施[^2]。 #### 方法三：监听应用显示事件并执行隐藏操作为了防止初次加载时可能出现的一瞬间默认 tabbar 显示现象（即所谓的“闪现”），可以在每次 app 切入前台可见状态下再次尝试隐藏它： ```javascript // 在 main.js 或者其他合适的地方注册全局侦听器 import Vue from 'vue'; Vue.prototype.$hideTabBar = function(){ setTimeout(function(){ // 延迟一小段时间再执行以确保视图已经渲染完成 try{uni.hideTabBar()}catch(e){} },0); }; ... new Vue({ onShow() { this.$hideTabBar(); } }); ``` 这种方法能够有效解决由于性能差异等原因造成的短暂视觉干扰问题[^3]。 #### 方法四：自定义 tabBar 并启用定制模式如果项目允许的话还可以考虑完全替换掉原有的 tabBar 组件，转而采用更加灵活可控的方式构建自己的底部菜单。此时只需简单地把项目的根目录下的 manifest.json (或 package.json) 中关于 tabBar 的部分加上 `"custom": true` 即可开启这种高级特性支持。 ```json "tabBar": { "list": [ {"pagePath":"pages/index/index","text":"首页"}, {"pagePath":"pages/profile/profile","text":"标签页"} ], "custom":true }, ``` 一旦启用了这个选项，则后续就需要自行负责创建和管理整个底部导航区域的内容与交互逻辑了[^4]。