uni-app实现点击底部导航tabbar跳转页面后隐藏tabbar

uni-app隐藏tabBar技巧
最新推荐文章于 2024-11-13 09:47:41 发布
原创 最新推荐文章于 2024-11-13 09:47:41 发布 · 7.9k 阅读 · 16 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #小程序

本文介绍了一种在uni-app中实现页面跳转时隐藏底部tabBar的方法，通过在需要隐藏tabBar的页面中调用uni.hideTabBar()和uni.showTabBar()来控制显示与隐藏，解决了直接跳转不包含底部导航栏的需求。

现在有这样一个需求：

就是点击记一笔然后直接进入新的页面，不包含底部tabbar

在tabBar中没有这个直接navigateTo跳转的

借鉴网上很多方法在小程序效果不太可

查找uni-app的api,他有提供tarBar显示隐藏的方法

那我们可以直接在需要隐藏tabBar页面中去控制

        onShow() {
		    uni.hideTabBar()
		},
		onHide(){
			uni.showTabBar()
		}

即可完成

uniapp隐藏底部导航栏（非自定义底部导航栏）
Dream_Fever的博客
08-18 2179
【代码】uniapp隐藏底部导航栏（非自定义底部导航栏）
如何在uniapp中弹出层弹出时遮住自带的tabbar
前端小陈的成长记录
06-07 1万+
vue3、uniapp中弹出层实现、如何遮挡自tabbar
uniapp自定义tabbar（支持中间凸起，角标，动态隐藏tab，全端适用）
abs625的博客
03-13 1万+
uniapp自定义tabbar
uniapp中如何隐藏tabbar
Vae2437426397的博客
09-05 2693
我们常常在登录界面是不显示tabbar的，所以有时需要隐藏起来- 调用的是uni.hideTabBar()来隐藏tabar- 调用uni.showTabBar()可以来显示隐藏的tabbar。
uni-app实现点击tabbar跳转页面后隐藏tabbar
不要秃头
10-29 1万+
利用uni-app写h5的项目时遇到点击tabbar中的内容跳转页面后不显示底部的tabbar，因为tabbar是在pages.json中注册的，只要是注册过的页面都会显示tabbar 但是现在需要点击tabbar中的“我要投诉”跳转页面后不显示底部导航栏就需要写一个中间页 pages/user-complain/user-complain页面中书写代码 methods: { onShow...
uni-app框架 tabBar（底部导航）创建的方法与外界跳转
01-20
在uni-app框架中，创建和管理底部导航栏是一个相对直接的过程，本篇文章将深入探讨如何在uni-app中设置TabBar以及处理外界跳转。 uni-app是一个多端开发框架，它允许开发者使用一套代码编写应用，同时适配iOS、...
uni-app框架中底部导航创建与外部链接跳转方法
最新发布
07-09
在uni-app中，如果需要从外部（如其他组件或API调用）跳转到TabBar页面，需要使用特定的API方法，因为直接使用navigateTo或redirectTo可能会导致跳转失败。对于TabBar页面之间的切换，推荐使用switchTab方法，它能够...
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
09-23
自定义tabbar底部导航栏，简洁，方便，二开 使用教程 将组件拷贝到uni_modules目录内，然后其他页面进行引用即可 <TC-tabBar :zhi="zhi"></TC-tabBar> </template>
源码uni-app 微信小程序根据角色动态的更改底部tabbar
03-24
1.包含小程序完整项目流程 2.两个角色切换登录 3.登录，登录记录，账号注册，选择公司，存取记录，授权名单，项目列表，盘点，盘点柜子，储物仓列表，我的等功能页面源码。
uni-app自定义tabBar；uni-app小程序自定义tabBar；uni-app小程序修改中间tabBar导航栏大小；uni-app中间导航栏凸起；uni-app修改底部导航栏
m0_60721514的博客
03-03 1125
需求：要求小程序，中间的tabBar自定义凸起或者图标变大； 问题：查看uni-app的tabBar文档可知，小程序是不支持midButton的； 解决思路：隐藏uni-app原有的tabBar，然后换成自己手写的导航栏，进行定位和自定义样式； 小程序页面截图： H5页面截图： 步骤和文件结构如下： 一、pages.json:正常书写，注意H5的需要加上midButton部分 { "pages": [ { "path": "pages/index/index", "style": {
uni-app—— uni-app 隐藏底部导航栏
qq_43201350的博客
12-11 1540
uni-app—— uni-app 隐藏底部导航栏
uniapp隐藏tabber
weixin_44286765的博客
03-30 1675
2、在遮罩层打开的同时隐藏tabbar，uni.hideTabBar();遮罩层关闭的同时显示tabbar，uni.showTabBar();1、使用自定义tabbar组件；uni-app学习踩坑集。
uni-app中隐藏tabbar
热门推荐
shgzzd的博客
12-11 2万+
uni-app在安卓中隐藏tabbar 在我们做一些小程序或者app的时候，默认的tabbar可能不能适用于我们app的排版或者布局，需要我们隐藏掉默认的 官网上对于隐藏tabbar的api如上 uni.hideTabBar 运用在App.vue中 但我们会发现一个问题，这样的写法在小程序中可以隐藏，但是在app中还是无法实现隐藏。 app中如果想实现效果，需要在页面的声明周期函数周再次引用一次即可。 这样就ok啦 47071)] 这样就ok啦 ...
uniapp 隐藏某一个tabBar
XZ_gui的博客
07-10 725
【代码】uniapp 隐藏某一个tabBar。
在uniapp当中隐藏掉默认tabbar并且使用自己的tabbar
学习记录
11-13 4257
【代码】在uniapp当中隐藏掉默认tabbar并且使用自己的tabbar。
uniapp隐藏自带的tabBar
qq_41421033的博客
11-11 1227
场景: 微信小程序在使用自定义tabBar组件时, 隐藏uniapp自带的tabBar。
uniapp app tabbar 页面默认隐藏
zerlinda0913的博客
11-15 3113
visible:true //显示或隐藏。index: 1, //列表索引。visible 默认为true,设为false则是不显示。1.在page.json 中找到tabbar。
uniapp隐藏单页面隐藏底部tab
weixin_41688609的博客
06-17 6452
uni.hideTabBar(); //隐藏tab uni.showTabBar(); //显示tab
关于uni-app中隐藏底部导航栏uni.hideTabbar()的使用
weixin_41979836的博客
06-01 1万+
关于uni-app中隐藏底部导航栏uni.hideTabbar()的使用及注意事项
评论 10
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值