uni-app不同权限显示不同的tabBar

最新推荐文章于 2024-06-21 14:51:30 发布
最新推荐文章于 2024-06-21 14:51:30 发布
阅读量1.3k 收藏 7
点赞数 3
分类专栏： javascript uniapp 文章标签： uniapp javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_58293192/article/details/129238133
版权
在项目开发中，通过在根目录创建config文件夹并设置tabbar.js，实现了根据不同用户权限动态显示不同tabBar的功能。这一方法允许在对应页面的pages.json文件中引用，从而提供个性化的用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在实际的项目开发中我们的项目中不同权限页面显示不同的tabBar.

实现:

我这里是在根目录创建一个config文件夹==>tabbar.js文件

不同的权限显示的tabbar也是不一样的

接下来就是在对应的页面进行使用:

pages.json文件:

uni-app根据登录权限自定义底部tabBar
咬耳朵小布丁
07-06 2534
uni-app根据登录权限自定义底部tabBar 原来写死的tabBar, 突然接到需求要根据用户的权限来显示底部按钮 效果图： 一、page.json 取消原有写死的配置 二、自定义组件tabbar， 以供后面在页面中引入，可以直接复制粘贴修改使用 <template> <view class="tarbar"> <view class=".tarbar-list" :style="{ background: tabBar.bac
uni-app 实现根据用户不同角色显示不同的tabBar
weixin_51772991的博客
03-31 2601
微信的tabBar最多5个,所以不能折磨写, 但其他的好像能折磨用(原因是因为这样用可以解决闪烁问题)我的方法原理: 相当于封装一个公共组件,需要用的地方就调用,(把自带的tabBar隐藏了就好了),下面的就是创建个vuex,放进去了3组数据(因为有3个角色),网上的是真麻烦啊(我也是抄的)!创建组件xiaoz.vue,根据权限(角色)调用不同的数据。在网上大量百度之后,好多都走不通,自己总结了一下!样子都一样的,无非就是数据不一样,千万别想太复杂了。切换tabBar时,需要把这个隐藏了,不然会报错。
uniapp 小程序根据权限动态生成 tabbar
m0_64344940的博客
06-11 3110
uniapp 小程序根据权限动态生成 tabbar
uniapp：不同权限设置不同的tabBar
1111111111
09-20 2535
admin和jeecg两个用户tabBar的区别是，后者有订单，前者没有，所以if else我们就把订单这一项的visible根据判断重新设置一下，其他项默认就是true，要显示，需要注意的是，一定要把if else写全，我第一次就只写了if，没写else，导致效果出不来。jeecg用户显示：首页，订单，消息，发现，我的，一共5个tabBar。admin用户显示：首页，消息，发现，我的，一共4个tabBar。我这里一共有5个页面，每个都要加这段代码。jeecg用户有订单，admin没有。
uni-app根据权限显示不同的tabBar
weixin_72329752的博客
01-03 1347
1、将pages.json中的tabBar的list设置为空数组,即不再使用默认系统自带的tabBar组件。 2、创建tabBar.vue组件,组件内的代码内容如下。 <template> <view class="tab-bar"> <view v-for="(item,index) in list" :key="index" class="tab-bar-item" @click="switchTab(item, index)"> <image
uniapp自定义底部导航tabBar，实现不同权限不同tabBar
sama_AA的博客
01-14 4784
uniapp自定义底部导航tabBar，实现不同权限不同tabBar
uni-app 实现根据用户不同角色显示不同的tabBar【完整图文流程】
cimbala的博客
04-19 1万+
文章目录一、需求二、uView 安装与配置2.1 HbuilderX导入插件2.2 配置三、实现步骤3.1 创建tabBar对应的页面文件3.2 配置`page.json`中的`tabBar`属性3.3 创建自定义`tabBar`文件3.4 配置Vuex3.4.1 tabBer.js3.4.2 getters.js3.4.3 getters.js3.4.4 在mian.js中引入并挂载3.4.5 把tabBar对象数组配置成组件3.4.6 页面使用四、总结 一、需求   UI框架uView可以使用vuex配
源码uni-app 微信小程序根据角色动态的更改底部tabbar
03-24
1.包含小程序完整项目流程 2.两个角色切换登录 3.登录，登录记录，账号注册，选择公司，存取记录，授权名单，项目列表，盘点，盘点柜子，储物仓列表，我的等功能页面源码。
移动应用开发——基于uni-app框架
m0_61839930的博客
06-17 1289
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。uni-app在手，做啥都不愁。即使不跨端，
uni-app的登录页面
最新发布
Lu_menglin的博客
06-21 859
接下来就是在 uniCloud中的cloudfunctions函数集里创建登录的login函数。注明这个登录功能需要用到阿里云的云数据库空间和创建云函数来简单实现的登陆效果。然在输入前面弄得login表里面得账号和密码，点击立即登录就可以了。然后再去阿里云的云数据库里创建login表储存账号和密码。然后在创建一个新的login的页面。第一步，我们先创建一个项目。uniapp的登录功能介绍。
uniapp微信小程序实现不同账号权限显示不同tabbar
weixin_52440106的博客
04-24 2199
一套小程序可能会有多个用户角色，比如在线课堂类小程序，会有老师和学生，但是两者能看到的内容应该是不一样的。
Uniapp根据权限（角色）不同动态展示底部tabbar
qq_53857666的博客
11-10 4990
动态展示底部Tabbar
uniapp 实现不同用户展示不同的tabbar(底部导航栏)
热门推荐
weixin_71403100的博客
09-19 1万+
最近在做一个uniapp开发的小程序遇到一个需求，希望不同用户登录后展示不同的tabbar页面，但是uniapp项目中的pages.json是只有一个list数组的，并且是不能写成动态效果，为了实现这个需求，便自定义了tabbar组件。
uniapp 根据不同权限设置不同的原生tabbar(不同数量也可以)--（不支持小程序）
前端小胡兔的博客
04-25 6702
根据不同权限展示不同tabbar； 为uni原生tabbar，避免了自己写组件后的跳转闪烁问题； 可以实现不同权限tabbar内容数量不同 设置了全局方法，只需要所有权限的tabbar页面调用即可 在设置过程中，整合了tabbar设置过程，整个代码只需设置一次
uni-app 中两个系统各自显示不同的tabBar
Welcome to My blog
03-20 2253
最近在一个项目中遇到一个需求,在登录页面成功登录以后需要判断身份,不同的身份的进入不同的页面,但是在项目中中的的数组只有一个，且不能写成动态的,那如何实现这个需求呢?答案是需要我们自定义。目录1、我们确定在 pages.json文件中的pages数组中的第一个页面就是进入程序时展示的第一个页面,那这个页面肯定就是我们的登录页面了。2、将pages.json中的tabBar的list设置为空数组,即不再使用默认系统自带的tabBar组件。3、创建tabBar.vue组件,组件内的代码内容如下。4、在main.
uni-app动态tabBar，根据不同用户展示不同的tabBar
m0_64642443的博客
09-07 8939
uni-app动态tabBar，根据不同用户展示不同的tabBar
uni-app微信小程序动态切换tabBar，根据不同用户角色展示不同的tabBar
wocwin的博客
05-24 4585
uni-app微信小程序动态切换tabBar，根据不同用户角色展示不同的tabBar
uni-app App根据用户权限动态展示不同tabbar
02-06
如果要在uni-app中根据用户权限动态展示不同的tabbar，可以这样做： 1. 在项目的入口文件中（如main.js），根据用户的权限信息动态配置tabbar的内容。 2. 在tabbar页面的onLoad钩子函数中，获取配置的tabbar内容，并将其设置到data中。 3. 在template中，使用v-for循环渲染tabbar的每一个item。 例如： main.js: ``` // 设置用户权限 const userPermission = { tabbar: ['home', 'user'] } // 配置tabbar const tabbar = { home: { text: '首页', iconPath: '/static/icon/home.png', selectedIconPath: '/static/icon/home_selected.png', }, user: { text: '我的', iconPath: '/static/icon/user.png', selectedIconPath: '/static/icon/user_selected.png', } } // 根据用户权限配置tabbar uni.setTabBar({ list: userPermission.tabbar.map(item => tabbar[item]) }) ``` tabbar页面： ``` <template> <view class="tabbar"> <view class="item" v-for="item in tabbarList" :key="item.pagePath" @click="navigateTo(item.pagePath)"> <image :src="item.iconPath" class="icon" /> <text class="text">{{item.text}}</text> </view> </view> </template> <script> export default { data() { return { tabbarList: [] } }, onLoad() { this.tabbarList = uni.getTabBar().list }, methods: { navigateTo(pagePath) { uni.navigateTo({ url: pagePath }) } } } </script> <style> .tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 50px; background-color: #fff; border-top: 1px solid #ccc; } .item {
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

开发那点事儿~

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

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

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

打赏作者

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

抵扣说明：

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

余额充值