uni-app中隐藏tabbar

最新推荐文章于 2024-05-09 11:31:42 发布
最新推荐文章于 2024-05-09 11:31:42 发布
阅读量2.1w 收藏 22
点赞数 7
文章标签： vue.js javascript 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shgzzd/article/details/121873297
版权

uni-app在安卓中隐藏tabbar

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

image-20211211143637806

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

image-20211211143739218

运用在App.vue中

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

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

image-20211211144013162

这样就ok啦

47071)]

这样就ok啦

沐言鸭
关注
  • 7
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
uni-app-tabbar:uni-app底部初步实现（不支持小程序）
03-19
uni-app-tabbar uni-app底部逐步实现（不支持小程序），请使用真机调试ok app效果图如下： 安装包如下：
uni-app网易云音乐实战
10-22
在本文中，我们将使用uni-app框架来开发一个网易云音乐应用程序，涵盖了从开发环境的搭建到项目的创建、运行、配置tabBar、首页静态页面、推荐歌单和最新音乐等内容。 开发环境的搭建 uni-app开发环境的搭建需要...
uniapp app tabbar 页面默认隐藏
zerlinda0913的博客
11-15 1569
visible:true //显示或隐藏。index: 1, //列表索引。visible 默认为true,设为false则是不显示。1.在page.json 中找到tabbar。
uniapp 原生tabbar添加阴影box-shadow
最新发布
ZhouJingID的博客
05-09 302
在APP.vue文件。
关于uni-app 在app中隐藏原生tabbar uni.hideTabBar()无效问题
qq_22475399的博客
03-14 1488
uni-app 隐藏tabbar uni.hideTabBar
uniapp隐藏tabber
weixin_44286765的博客
03-30 1316
2、在遮罩层打开的同时隐藏tabbar，uni.hideTabBar();遮罩层关闭的同时显示tabbar，uni.showTabBar();1、使用自定义tabbar组件；uni-app学习踩坑集。
uniapp真机调试app动态显示隐藏tabbar某一项
Rio_Gaven的博客
03-27 939
3.测试app有效，微信开发者工具模拟器上没有效果。
uniapp如何控制底部导航栏的显示隐藏
前端开发小白9527
02-08 7461
uni-app 底部导航栏设置
如何在uniapp中弹出层弹出时遮住自带的tabbar
前端小陈的成长记录
06-07 1万+
vue3、uniapp中弹出层实现、如何遮挡自tabbar
uni——底部导航栏隐藏单个
努力、拼搏、奋进
04-26 1034
uni——底部导航栏隐藏单个
uni-app 封装tabbar组件(vue3)
qq_57399113的博客
06-01 2366
1.创建组件 2.在需要使用的页面中引入
uni-app实现点击tabbar跳转页面后隐藏tabbar
热门推荐
不要秃头
10-29 1万+
利用uni-app写h5的项目时遇到点击tabbar中的内容跳转页面后不显示底部的tabbar，因为tabbar是在pages.json中注册的，只要是注册过的页面都会显示tabbar 但是现在需要点击tabbar中的“我要投诉”跳转页面后不显示底部导航栏就需要写一个中间页 pages/user-complain/user-complain页面中书写代码 methods: { onShow...
微信小程序自定义tabBar在uni-app的适配详解
10-16
主要介绍了微信小程序自定义tabBar在uni-app的适配详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uni-lb-tabbar
02-26
兼容性App + H5 +各平台小程序（头条小程序及Nvue暂不支持）约会插件推荐使用easycom约会导入插件后再pages.json加上如下配置： " easycom " : { " autoscan " : true , " custom " : { " lb-tabbar-item " : " @/...
源码uni-app 微信小程序根据角色动态的更改底部tabbar
03-24
1.包含小程序完整项目流程 2.两个角色切换登录 3.登录，登录记录，账号注册，选择公司，存取记录，授权名单，项目列表，盘点，盘点柜子，储物仓列表，我的等功能页面源码。
uni——底部弹框显示，底部导航隐藏
努力、拼搏、奋进
10-21 1945
uni——底部弹框显示，底部导航隐藏
uniapp隐藏底部导航栏（非自定义底部导航栏）
Dream_Fever的博客
08-18 1686
【代码】uniapp隐藏底部导航栏（非自定义底部导航栏）
uniapp设置隐藏原生导航栏(3)
m0_65607651的博客
01-23 1699
uniapp设置隐藏原生导航栏
uni-app 取消原生tab导航栏
weixin_54259790的博客
09-06 2867
这是原生的效果，有时候我们不太需要！ 解决方法： 找到pages.json界面 =》 globalStyle =》 加入 "app-plus":{ "titleNView":false // 取消原生tab导航栏 } 就可以了
uni-app 自定义底部tabbar
08-17
在uni-app中，你可以通过以下步骤来实现自定义底部tabbar： 1. 在main.js文件中添加以下代码段，以解决点击两次才能选择icon的问题： ``` Vue.mixin({ methods: { setTabBarIndex(index) { if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) { this.$mp.page.getTabBar().setData({ selected: index }) } } } }) ``` 2. 在index.wxss文件中重新定义tabbar的样式，包括背景、高度、字体大小等。以下是一个例子： ```css .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; box-shadow: 0px -2px 10px 0px rgba(0,0,0,0.05); box-sizing: content-box; } .tab-bar-item { flex: auto; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; background: #fff; height: 120rpx; } /* 自定义样式 */ .tab-bar-item.diy { margin-top: 0!important; background: transparent; position: relative; flex: inherit; width: 134rpx; } .tab-bar-item image { width: 48rpx; height: 48rpx; overflow: initial; } .tab-bar-item view { font-size: 24rpx; } .tab-bar-item image.diy { position: absolute; width: 134rpx; height: 140rpx; bottom: 25.6%; z-index: 100; } .tab-bar-item view.diy { margin-top: 90rpx; background: #fff; width: 100%; height: 100%; padding-top: 58rpx; z-index: 99; } ``` 通过以上步骤，你可以在uni-app中实现自定义底部tabbar。使用以上的代码段和样式定义，你可以根据需求自定义底部tabbar的样式和交互效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [uni-app-tabbar:uni-app底部初步实现（不支持小程序）](https://download.csdn.net/download/weixin_42172572/15923240)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [uni-app自定义底部tabbar](https://blog.csdn.net/Janent168/article/details/129809136)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值