如何控制小程序的tabBar的显示和隐藏

最新推荐文章于 2023-05-12 15:57:31 发布
最新推荐文章于 2023-05-12 15:57:31 发布
阅读量2.5k 收藏 1
点赞数
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a15240780264/article/details/118670955
版权

1、使用wx.hideTabBar() 方法隐藏tabBar
在这里插入图片描述

2、使用wx.showTabBar() 方法显示tabBar
在这里插入图片描述

参考文档

kjs_pass
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信小程序自定义底部 tabbar的两个方法
FOR 的博客
07-31 6578
这里记一下微信小程序自定义 tabbar 的方法 ，一个是官方给出的 。 一个是我在尝试的过程中想到的。 官方文档给了一个自定义tabbar 的方法 。 这个方法需要注意一下几点 ： 为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。 此时需要开发者提供一个自定义组件来渲染 tabBar，所有 tabBar 的样式都由该自定义组件渲染。推荐用 fixed 在底部的 cover-view + cover-image 组
优雅实现微信小程序动态tabBar，根据不同用户角色显示不同底部导航-更新版（支持自由组合总数超过5个tabBar菜单）
最新发布
01-03
1、小程序底部的tabBar需要根据不同用户角色显示不同底部导航。 2、使用自定义底部导航custom-tab-bar优雅实现微信小程序动态tabBar。 3、实现自由组合tabBar菜单项目，支持自由组合总数超过5个tabBar菜单。 4、本...
微信小程序开发笔记二—底部导航栏tabar
qq_45217381的博客
11-12 2548
本文介绍了微信小程序开发中底部导航栏的设计方法，步骤详细，非常适合初学的小伙伴！
微信小程序开发过程中tabbar页面显示的相关问题及解决办法
weixin_34218890的博客
03-24 1122
在微信小程序的开发过程中如果有使用过tabbar的同学，我相信一定会遇到一些困扰。为什么有些时候代码中明明已经在app.json里面增加了tabbar，可以页面中就是不显示呢？可不可以有些页面显示tabbar，而有些页面不显示tabbar呢？今天我把我在开发过程中遇到的问题整理出来跟大家分享。问题1：为什么页面底部不显示tabbar？很多...
【小程序】微信小程序自定义 tabbar以及隐藏有些页面的tabbar
羊羊羊羊羊羊羊的博客
05-12 7189
自定义微信小程序的tabbar，目前没有坑
tabBar的隐藏与显示
小飞猪的博客
01-04 1172
在app.json中设置的tabBar是全局显示的，要想在某一个子页面里对其进行隐藏，使用这两个方法即可： onLoad: function (options) { wx.hideTabBar(); }, onLoad: function (options) { wx.showTabBar(); },
微信小程序隐藏显示底部的tabbar
誓言不轻信，谎言不枉听
11-04 3360
1. 隐藏 wx.hideTabBar() 2.显示 wx.showTabBar()
微信小程序根据不同的权限展示不同的自定义tabbar
月落星河
05-08 4919
项目场景： 小程序中我们可能需要根据不同的权限展示不同的tabbar，比如你是会员的话，那么你的底部就展示一个VIP的tabbar，如果是普通用户的话就把这个VIP的tabbar隐藏掉。 解决方案： tabar自定义官方链接 首先我们先实现一个自定义的tabbar： 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整 创建custom-tab-bar，在根目录创建，如图(我用的是vant的组件，vant样式的使用vant官方链接 就不用去写
uniapp 小程序 根据角色变更tabbar个数
03-22
在开发小程序时，有时我们需要根据用户的角色或者权限动态地改变底部的TabBar，这在一些具有多用户类型或复杂业务逻辑的应用中非常常见。在uni-app框架中，这个功能可以通过灵活配置和编程来实现。uni-app是一个使用...
微信小程序底部导航tabbar
09-18
5. **隐藏和显示tabbar** 当某些页面不希望展示`tabbar`时，可以使用`wx.hideTabBar`方法，而在需要时用`wx.showTabBar`恢复显示。 6. **动画效果** 如果需要添加自定义动画，可以在`wxss`中通过CSS3动画实现，...
微信小程序底部tab-bar组件，高度还原微信原生tabBar功能及样式，且兼容iPhone异形全面屏
07-24
4. **wx.setTabBarItem**和`wx.setTabBarStyle`：微信小程序提供的API，用于设置`tabBar`的项和样式，这在自定义`tabBar`时必不可少。 5. **CSS Flexbox布局**：用于创建响应式和灵活的布局，适应不同屏幕尺寸。 6...
小程序通过页面json文件中的usingComponents引入组件的方式实现自定义tabbar，会闪烁，影响小.zip
07-27
5. **延迟渲染**：在页面加载时先隐藏tabbar，等组件加载完成后再显示，可以使用`wx.hideTabBar`和`wx.showTabBar`进行控制。 通过上述优化措施，可以有效地减少或消除自定义tabbar的闪烁问题。同时，开发者还需要...
微信小程序中隐藏与显示TabBar
sysun的专栏
05-13 3849
在微信小程序中，有时需要隐藏和显示TabBar，比如在页面登录以后，才可以显示TabBar，这时在APP.js中进行设置，来实现这种效果。 //app.js App({ onLaunch: function () { wx.hideTabBar() } })
小程序 ：自定义tabbar （名称后台获取）
小海鲜的博客
08-30 1042
前两步与一中的一致，从第三步开始有区别。
微信小程序隐藏tabBar
热门推荐
DamianGao的博客
04-05 3万+
微信小程序隐藏tabBar1、在app.json中的list内不能有非tabBar页面。简单说就是这个页面不要tabBar，那么tabBar也不要他了。{ "pages":[ "pages/index/index", "pages/logs/logs", "pages/reg/reg" ], "window":{ "backgroundTextStyle"
微信小程序 | 隐藏底部菜单栏 json中的tabBar
慌途L
05-22 1万+
个人记录 微信小程序 | 隐藏json中的tabBar 一、小程序的app.json中的底部菜单设置 底部菜单栏： 代码： { "pages": [ "pages/index/index", "pages/login/login" ], "window": { "backgroundTextStyle": "light", "navigati...
微信小程序_显示隐藏tabbar
小歪博客
04-22 3792
wx.hideTabBar和wx.showTabBar 隐藏tabbar wx.hideTabBar({ fail: function() { setTimeout(function() { // 做了个延时重试一次，作为保底。 wx.hideTabBar() }, 500) } }); 显示tabbar wx.showTabBar(...
小程序TabBar的显示和隐藏
qq_41219586的博客
01-04 3445
wx.hideTabBar()-----隐藏TabBar栏 wx.showTabBar()----显示TabBar栏 if (that.data.city!='株洲市') { wx.hideTabBar() } else { wx.showTabBar() }
uniapp的websocket的使用
a15240780264的博客
08-03 3787
1、websocket的封装 uniapp获取websocket返回来的数据可以采用Vuex进行存储 class websocketUtil { constructor(url, time) { /* url 是请求的后端的地址 time 是心跳包的时间 */ this.is_open_socket = false //避免重复连接 this.url = url //地址 this.data = null //心跳检测 this.timeout =
前端控制小程序tabbar某一项显示隐藏
07-14
在小程序中，可以通过控制 tabBar 的 list 来实现某一项的显示和隐藏。具体的实现步骤如下： 1. 在 app.json 文件中，配置 tabBar 的 list 项，例如： ```json "tabBar": { "list": [ { "pagePath": "pages/home/home", "text": "首页", "iconPath": "images/home.png", "selectedIconPath": "images/home_selected.png" }, { "pagePath": "pages/category/category", "text": "分类", "iconPath": "images/category.png", "selectedIconPath": "images/category_selected.png" }, { "pagePath": "pages/cart/cart", "text": "购物车", "iconPath": "images/cart.png", "selectedIconPath": "images/cart_selected.png" }, { "pagePath": "pages/profile/profile", "text": "个人中心", "iconPath": "images/profile.png", "selectedIconPath": "images/profile_selected.png" } ] } ``` 2. 在小程序页面的逻辑代码中，根据需要修改 tabBar 的 list。例如，要隐藏第二个 tab，可以将其从 list 中移除： ```javascript const appInstance = getApp(); Page({ onLoad() { // 隐藏第二个 tab const tabBarList = appInstance.globalData.tabBar.list; tabBarList.splice(1, 1); appInstance.globalData.tabBar.list = tabBarList; } }); ``` 3. 重新加载小程序页面，tabBar 的某一项将会被隐藏。 请注意，以上方法只是在小程序中动态控制 tabBar 的显示和隐藏，并且只在页面加载时生效。如果需要在其他场景下动态修改 tabBar，可以使用类似的方法来实现。同时，记得根据需求调整 tabBar 的样式和其他配置信息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kjs_pass

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值