uniapp新增特性支持设置动态配置 tabBarItem的显示与隐藏

最新推荐文章于 2025-09-13 15:09:40 发布

最新推荐文章于 2025-09-13 15:09:40 发布 · 1.9k 阅读

文章标签：

#uni-app

uni-app 专栏收录该内容

8 篇文章

订阅专栏

App平台、H5平台新增支持设置动态配置 tabBarItem 显示隐藏
详情
以上visible只有3.2.10+支持，小伙伴们注意。这两个参数配合起来可以在uniapp开发中真正意义上动态控制tabbar了

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

码农颜小白

关注关注

2
点赞
踩
3

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp 自定义微信小程序 tabBar 导航栏

sinat_35272898的博客

09-03

7871

使用微信小程序 custom-tab-bar 自定义 tabBar 导航栏的主要实现过程

uniapp中自定义tabbar

Femi的博客欢迎大家

11-13

3435

本次自动以tabbar在插件库sdk基础上完成，感谢巨人的肩膀。另外uniapp官方正在于此功能进行投票，后期可能官方就可以支持该功能啦~ 插件地址：https://ext.dcloud.net.cn/plugin?id=1425 实现步骤： 1.在插件商店中导入插件至所需要的项目中， 2.page.json中设置正常tabbar展示的数组列表 3.在登录页面权限判断看是否展示自定义tabbar: uni.setStorageSync('isExternal', res.data.isExte

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

uniapp动态修改tabbar

最新发布

qq_36158551的博客

09-13

1385

uniapp是一款跨端开发框架，可以同时开发出h5、小程序、app等多个平台的应用，是非常实用的开发工具。其中，tabbar是作为底部导航栏来展示多个页面的重要控件之一。在开发过程中，有时需要根据不同的业务需求动态更改tabbar，本文将介绍如何在uniapp中实现动态更改tabbar的方法。在Uniapp中实现动态修改tabbar的方法。在开发过程中，需要根据不同的业务需求动态调整底部导航栏的样式和内容。

自定义 tabBar 在切换 tab 时会使 tabBar 消失

han_calligrapher的博客

06-05

1898

app.json和页面json 文件中引用自定义的tabbar组件，引发的系列页面错乱问题： 1、出现问题的机型： ios、android均会出现（如iphone8plus、iphoneX、三星s8） 2、微信版本号: 7.0.12 3、出现问题的时间：2020年6月5日上午11点左右到下午14点左右 4、未改任何代码，线上版本、体验版都自动恢复正常，时间：2020年6月5日下午14点左右之后。现将出现问题的场景和方案描述如下：调试工具显示正常，手机预览和真机调试异常场景一：自定义 ta

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

qq_43235503的博客

09-10

7662

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

关于UITabbar在push中隐藏与显示

iCash

09-04

4697

试了很多，如果单纯的显示与隐藏就会出现frame的设置问题最后还是选择了 controller.hidesBottomBarWhenPushed = YES; 这样就存在一个问题，很多人发现推到下一个界面，tabbar是隐藏掉了，但是再POP回来的时候，tabbar却没有显示。是怎么回事呢。其实很简单上面的controller要用你要推的那个界面，而不是self。这样操作的话，只需

uniapp学习总结

weixin_67850938的博客

06-15

1190

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。uni-app组成和跨端原理uni-app能实现一套代码、多端运行，核心是通过编译器 + 运行时编译器：将uni-app统一代码编译生成每个平台支持的特有代码；如在小程序平台，编译器将.vue文件拆分生成wxmlwxssjs等代码。

[uniapp] uniapp基本使用组件布局样式网络请求跨端插件发布 app打包

qq_14993591的博客

11-25

1522

网址：https://uniapp.dcloud.io/ uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。基本使用 4.1、创建小程序项目两种创建方式：通过HBuilderX可视化界面（推荐） HBuilderX是绿色包，需要解压然后才能使用，运行HBuildX.exe即可通过vue-cli命令行如果使用uniapp开发小程序，后续需要使用文档

前端框架-小程序uniApp

aming小老弟

12-03

1467

获取集合Collection示例如下。nosql 非关系型数据库。

【面试宝典】39道UniApp高频题库整理(附答案背诵版)

tyler的博客

08-10

5122

uniApp是一个使用Vue.js开发所有前端应用的框架，它允许开发者用一套代码同时发布到iOS、Android、Web（包括PC和移动端浏览器）、以及各种小程序（微信、支付宝、百度、字节跳动、QQ等）和快应用等多个平台。简而言之，uniApp的宗旨是“一次开发，多处运行”。使用uniApp，开发者可以享受到Vue.js的开发体验，包括组件化开发、Vue插件支持、Vuex状态管理等，同时还能通过uniApp提供的丰富API和组件，轻松实现跨平台应用的开发。

微信小程序和uni-app面试高频知识点

qq_53694927的博客

11-27

1228

微信小程序和uni-app面试高频知识点

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

erduoduo520的专栏

09-08

4191

自定义的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>

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

Rio_Gaven的博客

03-27

2695

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

uniapp app tabbar 页面默认隐藏

zerlinda0913的博客

11-15

3101

visible:true //显示或隐藏。index: 1, //列表索引。visible 默认为true,设为false则是不显示。1.在page.json 中找到tabbar。

uniapp动态设置tabbar

m0_61429447的博客

04-01

2980

3、涉及到的所有tabbar界面在onshow里调用reviseTabbarByUserType方法。2、app.vue 的globalData里加入reviseTabbarByUserType方法。###补充reviseTabbarByUserType方法解释。这个方法是用来根据用户类型修改TabBar的展示内容。

uni-app--微信小程序自定义tabbar

atu1111的博客

07-29

4656

uni-app–微信小程序自定义tabbar 微信官方小程序自定义tabbar 1.添加 tabBar 代码文件 1) 从官网下载案例，如下： 2) 接着把custom-tab-bar整个文件拷贝到你的项目下： 3) 修改custom-tab-bar/index.js的文件，路径都改为uni-app下的页面路径和图片路径 Component({ data: { selected: 0, color: "#7A7E83", selectedColor: "#3cc51f

uni-app自定义tabBar

weixin_39357177的博客

09-08

7350

一个项目有多个角色，比如医生和患者，tabbar跳转的路径不一样，但是在pages.json中无法配置多个tabBar，这时候就要自定义tabBar了下面一个小小demo，场景是医生和患者端，一共四个不同的页面，分别是医生首页，患者首页，医生我的页面，患者我的页面，tabbar要求根据不同的角色跳转到对应的路径（一）配置pages.json custom设置为true，并且把所有需要切换的页面都配置在list中，否则之后切换tab用switchTab方法无效 "tabBar": { "cu

uniapp自定义tabbar

今天学习了吗

03-08

7783

在开发微信小程序时，由于uniapp官方的tabbar不满足根据权限区分tab的要求，则自定义了tabbar，出现两个问题；问题一：自定义的tabbar在切换的时候tabbar会闪烁，尤其在用户手机性能不太好的手机型号上闪烁尤其明显；问题二：自定义的tabbar使用uni.redirectTo切换页面每次都会触发页面的onLoad，页面数据得不到缓存，消耗性能。所以将官方的tabbar和自定义的tabbar结合使用，（1）在tabbar页面使用uni.hideTabBar({})将官方的ta

uni-app自定义tabbar

小菜鸟的博客

12-07

7292

uni-app自定义tabbar 为什么要自定义tabbar呢,虽然说直接在page.json里面直接配置性能可能更好点,但是有时候满足不了我们的需求,比如说,需要鉴权的时候,我们就需要通过不同的用户显示不同的底部首先page.json里面因为做tabbar所以默认的配置项必须注释,只留下跳转的路径即可接下来就在components 里面创建一个tabbar文件 tabbar.vue <template> <view> <view class="uni-tab

uniapp小程序tabbar动态显示隐藏

08-21

在UniApp小程序中，TabBar是一个固定的底部导航栏，用于在各个页面之间切换。如果你想让某些特定的TabBar在特定条件下动态地显示或隐藏，可以借助Vue.js的数据绑定和条件渲染功能来实现。 1. 首先，你需要在`pages.json`文件中配置好TabBar，并给每个item分配一个唯一的标签路径(`path`)： ```json { "tabBar": { "color": "#fff", "selectedColor": "#f00", "borderStyle": "black", "list": [ {"pagePath": "index", "text": "首页", "iconPath": "home.png"}, // 其他页面配置... ] } } ``` 2. 然后，在对应的页面组件中，你可以创建一个Vue组件的数据属性来控制TabBar的状态，比如`showTabBar`： ```html <template> <view :v-if="shouldShowTabBar"> <uni-tabbar :options="tabBarOptions" /> </view> </template> <script> export default { data() { return { tabBarOptions: { ... }, // 使用默认的tabBar选项 shouldShowTabBar: true, // 初始状态为true，显示TabBar }; }, computed: { // 如果需要基于业务逻辑动态计算是否显示TabBar，可以在这里添加 shouldShowTabBarComputed() { // 这里可以根据你的实际需求编写判断逻辑 if (/* 满足某个条件 */) { this.shouldShowTabBar = false; } else { this.shouldShowTabBar = true; } } }, watch: { // 当某个依赖于TabBar显示的条件变化时，监听这个变化 'someDependentData': function(newVal) { this.$nextTick(() => { this.shouldShowTabBarComputed; }); } } }; </script> ``` 在上面的代码中，`watch`属性用于监听数据的变化并重新计算`shouldShowTabBar`。你可以根据你的业务场景自定义判断逻辑。