Uniapp实现不同角色登录 显示不同tabbar（通俗易懂）

最新推荐文章于 2024-05-24 11:49:26 发布
最新推荐文章于 2024-05-24 11:49:26 发布
阅读量1.7k 收藏 17
点赞数
分类专栏： uni小程序 文章标签： uni-app 前端 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52510500/article/details/131420436
版权

1. 首先在pages.json中正常配置tabbar（无论是默认tabbar还是自定义tabbar）

 2. 在vuex中存储tabbar相关数据，包括当前所使用到的tabbar数据，以及存储所有角色所对应的tabbar数据的集合

 

 3. 最后在登录的时候，根据所返回的角色id，调用修改当前所使用的tabbar数据的方法即可

 

BelieveTom、
关注
  • 0
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
uni-app不同权限显示不同的tabBar
m0_58293192的博客
02-27 1153
uni-app不同权限显示不同的tabBar
uniapp自定义tabBar，根据角色展示路由导航
Menqq的博客
01-04 1448
uniapp自定义tabBar（custom-tab-bar），根据角色展示路由导航
uni-app微信小程序动态切换tabBar，根据不同用户角色展示不同的tabBar
最新发布
wocwin的博客
05-24 1221
uni-app微信小程序动态切换tabBar，根据不同用户角色展示不同的tabBar
uniapp 微信小程序根据不同角色实现动态路由
qq_47255575的博客
12-28 1530
不同角色/已登录未登录，都有不一样的底部导航栏
源码uni-app 微信小程序根据角色动态的更改底部tabbar
03-24
1.包含小程序完整项目流程 2.两个角色切换登录 3.登录，登录记录，账号注册，选择公司，存取记录，授权名单，项目列表，盘点，盘点柜子，储物仓列表，我的等功能页面源码。 4.智慧仓储小程序，学习使用，禁止直接商用
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配
uniapp实现不同登录角色显示不同底部导航栏
zjbsama的博客
05-29 3498
/style>这里使用了uview中tabBar选中项和非选中项图片的切换和文字颜色的改变。
uniapp自定义底部导航tabBar，实现不同权限不同tabBar
sama_AA的博客
01-14 3466
uniapp自定义底部导航tabBar，实现不同权限不同tabBar
uni-app动态tabBar，根据不同用户展示不同的tabBar
m0_64642443的博客
09-07 6870
uni-app动态tabBar，根据不同用户展示不同的tabBar
uniapp 微信小程序tabbar凸起的显示
08-25
在`uniapp`中处理微信小程序的tabbar凸起效果并确保其不闪烁，是一项技术性工作，涉及到CSS样式、事件处理以及可能的动画优化。 首先，我们需要了解微信小程序中的`tabbar`配置。在`app.json`文件中，我们可以定义...
优雅实现微信小程序动态tabBar，根据不同用户角色显示不同底部导航
11-01
1、小程序底部的tabBar需要根据不同用户角色显示不同底部导航。 2、使用自定义底部导航 custom-tab-bar优雅实现微信小程序动态tabBar。 适合人群： 1、具备一定编程基础，熟悉小程序开发者 能学到什么： 1、使用...
uniapp 小程序 根据角色变更tabbar个数
03-22
2. **计算TabBar数量**：根据用户的角色，计算出应该显示的TabBar个数。例如，管理员可能有4个TabBar，而普通用户只有2个。 3. **动态生成TabBar配置**：基于计算出的TabBar数量，动态生成`list`数组。每个元素包含...
优雅实现微信小程序动态tabBar，根据不同用户角色显示不同底部导航-更新版（支持自由组合总数超过5个tabBar菜单）
01-03
1、小程序底部的tabBar需要根据不同用户角色显示不同底部导航。 2、使用自定义底部导航custom-tab-bar优雅实现微信小程序动态tabBar。 3、实现自由组合tabBar菜单项目，支持自由组合总数超过5个tabBar菜单。 4、本...
UniApp微信小程序登录不同角色动态设置TabBer(多于5个TabBer页面)
qq_38088386的博客
12-17 6686
最近工作在用UniApp做项目，上个星期左右这个项目APP端已经做的差不多了，后面接到任务要把这个项目发布小程序版本，一些样式兼容问题处理完后卡在了动态设置TabBer这上面，在app端使用UniApp的api(uni.setTabBarItem(OBJECT)即可完成功能需求)，但是这个api在微信小程序端仅支持修改文字图标不支持修改pagePath，然后就开始找各种文章，文档，询问同行朋友等，最终得出大都以下两种解决方案。 方案一：使用微信小程序开发文档中推荐的自定义TabBer 在 app.jso
UNIAPP实战项目笔记55 自定义Tabbar并使用Tabbar事件拦截未登录跳转到登录页面
Ggome的博客
12-18 1743
点击购物车和我的的时候需要拦截并验证登录通过验证的直接跳转,为通过验证的跳转到登录页面通过自定义tabbar来实现。
uni-app 实现根据用户不同角色显示不同的tabBar
weixin_51772991的博客
03-31 2165
微信的tabBar最多5个,所以不能折磨写, 但其他的好像能折磨用(原因是因为这样用可以解决闪烁问题)我的方法原理: 相当于封装一个公共组件,需要用的地方就调用,(把自带的tabBar隐藏了就好了),下面的就是创建个vuex,放进去了3组数据(因为有3个角色),网上的是真麻烦啊(我也是抄的)!创建组件xiaoz.vue,根据权限(角色)调用不同的数据。在网上大量百度之后,好多都走不通,自己总结了一下!样子都一样的,无非就是数据不一样,千万别想太复杂了。切换tabBar时,需要把这个隐藏了,不然会报错。
uniapp 根据不同角色实现动态底部TabBar导航栏
qq_32073593的博客
02-19 5430
根据用户角色信息灵活地调整TabBar的属性，从而实现个性化的TabBar界面展示，以满足不同用户群体的特定需求。
uniapp 实现不同用户展示不同的tabbar(底部导航栏)
weixin_71403100的博客
09-19 1万+
最近在做一个uniapp开发的小程序遇到一个需求，希望不同用户登录后展示不同的tabbar页面，但是uniapp项目中的pages.json是只有一个list数组的，并且是不能写成动态效果，为了实现这个需求，便自定义了tabbar组件。
uniapp：不同权限设置不同的tabBar
1111111111
09-20 1724
admin和jeecg两个用户tabBar的区别是，后者有订单，前者没有，所以if else我们就把订单这一项的visible根据判断重新设置一下，其他项默认就是true，要显示，需要注意的是，一定要把if else写全，我第一次就只写了if，没写else，导致效果出不来。jeecg用户显示：首页，订单，消息，发现，我的，一共5个tabBar。admin用户显示：首页，消息，发现，我的，一共4个tabBar。我这里一共有5个页面，每个都要加这段代码。jeecg用户有订单，admin没有。
uniapp自定义tabbar,实现不同角色进入显示不同底部tabBar
05-30
可以通过以下步骤来实现uniapp自定义tabbar，实现不同角色进入显示不同底部tabBar： 1. 在pages文件夹下创建对应的角色页面，例如：student、teacher、admin等。 2. 在每个角色页面的vue文件中，使用自定义底部tabBar组件，并且通过props向组件传递当前角色的标识。 3. 在自定义底部tabBar组件中，根据接收到的角色标识动态渲染对应的底部tabBar。 4. 在App.vue文件中，通过uni.showTabBar和uni.hideTabBar方法来显示或隐藏底部tabBar。 5. 在main.js文件中，通过uni.getStorageSync方法获取当前用户角色信息，并将其存储在全局变量中，以便在各个页面中使用。 6. 在页面跳转时，需要根据当前用户角色信息来判断是否需要显示底部tabBar，并且通过uni.redirectTo或uni.navigateTo方法实现页面跳转。 举个例子，如果当前用户是学生，则在student页面中使用以下代码来引入自定义底部tabBar组件： ``` <template> <view> <text>这是学生页面</text> <my-tab-bar :role="'student'" /> </view> </template> <script> import MyTabBar from '@/components/MyTabBar.vue' export default { components: { MyTabBar } } </script> ``` 在自定义底部tabBar组件中，可以使用以下代码来根据接收到的角色标识动态渲染对应的底部tabBar： ``` <template> <view> <view v-if="role === 'student'"> <!-- 学生底部tabBar --> </view> <view v-else-if="role === 'teacher'"> <!-- 教师底部tabBar --> </view> <view v-else-if="role === 'admin'"> <!-- 管理员底部tabBar --> </view> </view> </template> <script> export default { props: { role: { type: String, required: true } } } </script> ``` 通过以上步骤，就可以实现uniapp自定义tabbar，实现不同角色进入显示不同底部tabBar的功能了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值