uniapp 动态显示隐藏底部tabbar

已于 2022-03-22 22:25:01 修改
阅读量5.4k 收藏 3
点赞数 4
分类专栏： uniapp 实战 文章标签： 前端
于 2022-03-22 22:22:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42389674/article/details/123673366
版权

显示隐藏tabBar的需求

在日常开发过程中，经常会有动态显示隐藏底部tabBar的需求

uni.hideTabBar

uni.hideTabBar显示tabbar

uni.showTabBar

uni.showTabBar显示tabbar

uniapp自定义动态tabbar及全局挂载底部自定义组件
老蔡学代码
02-02 5075
uniapp在pages.json中定义的tabbar，在非tabbar页面的时候不会显示，所以自定义了一个tabbar组件。（注意是自定义组件不是官方的custom-tab-bar组件）
uniapp 根据不同角色实现动态底部TabBar导航栏
qq_32073593的博客
02-19 1万+
根据用户角色信息灵活地调整TabBar的属性，从而实现个性化的TabBar界面展示，以满足不同用户群体的特定需求。
uni-app隐藏和显示小程序的底部的tabbar
肖肖肖丽珠的博客
05-15 3153
隐藏底部的tabbar uni.hideTabBar() 显示底部的tabbar uni.showTabBar()
uniapp 去除顶部导航栏（隐藏导航栏）
Binglianxiaojiao的博客
03-26 1615
开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。在具体路由下面的style中配置 "navigationStyle":"custom"3、根据平台去除导航栏（举例H5端）全部配置都在page.json文件。1、全平台去除导航栏。2、单页面去除导航栏。
uniapp底部动态tabbar
weixin_47190975的博客
03-06 3081
uniapp底部动态tabbar
uniapp 隐藏某一个tabBar
XZ_gui的博客
07-10 614
【代码】uniapp 隐藏某一个tabBar。
uni-app -- 动态展示隐藏tabbar
Dark_programmer的博客
12-13 3065
遇到问题不要怕，一定要去克服它 遇到这么一个需求，当事件触发时，展示popup组件。 在H5上没问题，会自动覆盖tabbar。但是在微信小程序的时候遇到了问题，没有进行覆盖。 如图： H5: 微信小程序: 那么如何根据某条件动态调整tabbar的隐藏显示呢？ 经查找，微信小程序有这个么个api 隐藏tabbar： wx.hideTabBar() 展示tabbar： wx.showTabBar() 有了对应的api就可以进行代码的调整了。 watch: { show: { handle.
uniapp小程序自定义动态tabbar
04-08
小程序的TabBar是底部固定显示的导航栏，通常包含多个页面的快捷入口。微信、支付宝、百度等小程序平台都提供了预设的TabBar样式，但往往不能满足所有设计需求，因此自定义动态TabBar成为了解决这一问题的关键。 3....
源码uni-app 微信小程序根据角色动态的更改底部tabbar
03-24
1.包含小程序完整项目流程 2.两个角色切换登录 3.登录，登录记录，账号注册，选择公司，存取记录，授权名单，项目列表，盘点，盘点柜子，储物仓列表，我的等功能页面源码。
详细介绍uniapp小程序自定义底部tabbar样式的方法
m0_74745897的博客
12-15 1万+
原生tabBar是相对固定的配置方式，但是默认的样式可能无法满足我们的需求，所以我们需要自定义设置tabbar样式。
uniapp 小程序 根据角色变更tabbar个数
03-22
在开发小程序时，有时我们需要根据用户的角色或者权限动态地改变底部的TabBar，这在一些具有多用户类型或复杂业务逻辑的应用中非常常见。在uni-app框架中，这个功能可以通过灵活配置和编程来实现。uni-app是一个使用...
uniapp中如何隐藏tabbar
Vae2437426397的博客
09-05 2038
我们常常在登录界面是不显示tabbar的，所以有时需要隐藏起来- 调用的是uni.hideTabBar()来隐藏tabar- 调用uni.showTabBar()可以来显示隐藏的tabbar。
uni-app—— uni-app 隐藏底部导航栏
qq_43201350的博客
12-11 1382
uni-app—— uni-app 隐藏底部导航栏
关于uni-app中隐藏底部导航栏uni.hideTabbar()的使用
weixin_41979836的博客
06-01 1万+
关于uni-app中隐藏底部导航栏uni.hideTabbar()的使用及注意事项
【uni-app】 动态设置 tabBar
loyd3的博客
04-27 1万+
uni.setTabBarItem(OBJECT) 动态设置 tabBar 某一项的内容 uni.setTabBarItem({ index: 0, text: 'text', iconPath: '/path/to/iconPath', selectedIconPath: '/path/to/selectedIconPath' }) uni.setTabBarStyle(OBJECT) 动态设置 tabBar 的整体样式 uni.setTabBarStyle({ color: '#F
uniapp 隐藏或显示tabar
weixin_45435854的博客
07-21 6301
uniapp 隐藏或显示tabar //滚动，滑动一段距离显示或隐藏tabar onPageScroll(e) { if(e.scrollTop>=10){ uni.hideTabBar(); }else if(e.scrollTop<=10){ uni.showTabBar(); } }
uni-app中隐藏底部导航栏
业余前端的职业经历
02-10 2万+
有时候我们不需要底部导航栏,或者我们需要自己重新书写底部导航栏 可以把原生的底部导航栏隐藏掉 在App.vue文件中 在声明周期函数 onLaunch onLaunch: function() { console.log('App Launch') uni.hideTabBar({}) } 上述方法在 微信小程序上确实可...
uniapp中设置TabBar
03-06 1万+
效果图： 结构目录： pages.json: { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "enablePullDownRefresh": false } }, { "path":
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
最新发布
04-03
### 实现 UniApp 动态生成带权限控制的自定义 Bottom TabBar #### 1. 封装 TabBar 组件 在 `components` 目录下创建一个新的组件文件夹，命名为 `CustomTabBar` 并编写其逻辑。此组件负责渲染动态生成的 TabBar。 ```vue <template> <view class="tab-bar"> <block v-for="(item, index) in tabbarData" :key="index"> <view class="tab-item" @click="switchPage(item.pagePath)"> <image :src="currentRoute === item.pagePath ? item.selectedIconPath : item.iconPath"></image> <text :class="{ active: currentRoute === item.pagePath }">{{ item.text }}</text> </view> </block> </view> </template> <script> export default { props: ['tabbarData', 'currentRoute'], methods: { switchPage(pagePath) { uni.switchTab({ url: pagePath }); } } }; </script> <style scoped> .tab-bar { display: flex; justify-content: space-around; align-items: center; background-color: white; border-top: 1px solid #e0e0e0; padding: 10px 0; } .tab-item { text-align: center; } .active { color: blue; } </style> ``` #### 2. 定义 TabBar 数据结构 根据用户的权限，在 Vuex 或本地状态管理工具中存储对应的 TabBar 配置数据。以下是可能的数据结构： ```javascript const tabbarData = [ { "pagePath": "/pages/index/index", "iconPath": "/static/tabBar/home_gray.png", "selectedIconPath": "/static/tabBar/home_col.png", "text": "首页" }, { "pagePath": "/pages/user/user", "iconPath": "/static/tabBar/user_gray.png", "selectedIconPath": "/static/tabBar/user_col.png", "text": "我的" } ]; ``` #### 3. 获取并处理用户权限 通过后端接口获取当前用户的权限列表，并将其映射为实际可用的 TabBar 页面路径[^2]。假设后端返回如下权限数据： ```json { "permissions": ["home", "profile"] } ``` 前端可以基于这些权限过滤出有效的 TabBar 条目： ```javascript function filterTabsByPermission(permissions, allTabs) { return allTabs.filter(tab => permissions.includes(tab.permission)); } // 假设全量 TabBar 列表 const allTabs = [ { permission: "home", ... }, { permission: "settings", ... } ]; // 用户权限 const userPermissions = ["home"]; // 计算最终显示的 Tabs const filteredTabs = filterTabsByPermission(userPermissions, allTabs); ``` #### 4. 存储至 Vuex 将计算后的 TabBar 数据存入 Vuex 的全局状态中以便各处访问[^1]。 ```javascript import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { tabBarList: [] }, mutations: { SET_TABBAR_LIST(state, list) { state.tabBarList = list; } }, actions: { async fetchUserPermissionsAndSetTabBar({ commit }) { const response = await uni.request({ url: '/api/get-user-permissions' }); // 替换为真实 API 地址 const permissions = response.data.permissions; const allTabs = [...]; // 初始化全量 TabBar 数据 const filteredTabs = filterTabsByPermission(permissions, allTabs); commit('SET_TABBAR_LIST', filteredTabs); } } }); ``` #### 5. 引入组件到页面 在需要展示 TabBar 的页面中引入封装好的 `CustomTabBar` 组件，并绑定 Vuex 中的状态数据。 ```vue <template> <view> <!-- 主体内容 --> <custom-tab-bar :tabbar-data="tabBarList" :current-route="currentRoute"></custom-tab-bar> </view> </template> <script> import CustomTabBar from '@/components/CustomTabBar.vue'; import { mapState } from 'vuex'; export default { components: { CustomTabBar }, computed: { ...mapState(['tabBarList']), currentRoute() { return this.$route.path; } } }; </script> ``` #### 6. 修改 `pages.json` 为了支持动态 TabBar 渲染，需确保 `pages.json` 文件中的 `tabBar` 字段为空或仅作为占位符存在[^3]。 ```json { "tabs": true, "usingComponents": {}, "globalStyle": {} } ``` --- ### 总结 上述流程涵盖了从权限获取、数据筛选、Vuex 状态管理以及组件化开发等多个方面，能够有效实现 UniApp 下基于权限动态生成 Bottom TabBar 的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值