uniapp:不同权限设置不同的tabBar

news2024/11/16 15:25:57

1、在pages.json里,将所有tabBar涉及的页面都加进来。

我这里使用username来动态显示tabBar。

jeecg用户显示:首页,订单,消息,发现,我的,一共5个tabBar。

admin用户显示:首页,消息,发现,我的,一共4个tabBar。

所以最终要设置5个tabBar。

"tabBar": {
		"color": "#bbbbbb",
		"selectedColor": "#d63a2b",
		"borderStyle": "white",
		// 需要注意,使用了tabBar后,页面跳转就得用switchTab,不能再用redirectTo和navigateTo了
		"list": [{
				"selectedIconPath": "./static/tabbar/home_cur.png",
				"iconPath": "./static/tabbar/home.png",
				"pagePath": "pages/index/index",
				"text": "首页"
			},
			{
				"selectedIconPath": "./static/tabbar/orders_cur.png",
				"iconPath": "./static/tabbar/orders.png",
				"pagePath": "pages/orders/orders",
				"text": "订单"
			},
			{
				"selectedIconPath": "./static/tabbar/messages_cur.png",
				"iconPath": "./static/tabbar/messages.png",
				"pagePath": "pages/messages/messages",
				"text": "消息"
			},
			{
				"selectedIconPath": "./static/tabbar/find_cur.png",
				"iconPath": "./static/tabbar/find.png",
				"pagePath": "pages/find/find",
				"text": "发现"
			},
			{
				"selectedIconPath": "./static/tabbar/my_cur.png",
				"iconPath": "./static/tabbar/my.png",
				"pagePath": "pages/my/my",
				"text": "我的"
			}
		]
	}

2、在App.vue的globalData里加入reviseTabbarByUserType方法,如下代码:

admin和jeecg两个用户tabBar的区别是,后者有订单,前者没有,所以if else我们就把订单这一项的visible根据判断重新设置一下,其他项默认就是true,要显示,需要注意的是,一定要把if else写全,我第一次就只写了if,没写else,导致效果出不来。

登录成功的时候,已经把userInfo保存在本地了,所以只需要getStorageSync就可以了。

<script>
	export default {
		globalData:{
			reviseTabbarByUserType: function() {
				let username = uni.getStorageSync('login_user_info').username;
				if(username=='admin'){
						uni.setTabBarItem({
							index: 1,
							visible: false,
						})
				}else{
					uni.setTabBarItem({
						index: 1,
						visible: true,
					})
				}
			}
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

3、在tabBar涉及到的每个页面的onShow里调用reviseTabbarByUserType。

我这里一共有5个页面,每个都要加这段代码。

onShow() {
			getApp().globalData.reviseTabbarByUserType();
		},

最终效果:

jeecg用户有订单,admin没有。

参考博客:uniapp 根据不同权限设置不同的原生tabbar(不同数量也可以)--(不支持小程序)_uni.settabbaritem_前端小胡兔的博客-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1025666.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

喜报:项目验收季之陕西融通军民服务社会议室大屏系统项目建设顺利通过竣工验收

由达之云承建的陕西融通军民服务社会议室大屏系统项目建设日前完满完成各项建设任务&#xff0c;建设成果达到预期项目建设目标&#xff0c;并于9月19日顺利通过项目竣工验收。 陕西融通军民服务社有限公司会议大屏系统建设项目为大会议室增加一套视频会议系统&#xff0c;将原…

同为科技(TOWE)工业用插头插座及配电箱产品选型推荐

工业用插头插座及配电箱产品是专用于工业环境中的电源连接和电气设备控制&#xff0c;与普通家用插头插座相比&#xff0c;通常具有更高的功率和电流容量&#xff0c;并且设计上考虑了耐用性、安全性和适应各种环境条件的能力。工业用插头插座产品类型多样&#xff0c;包括插头…

【数仓建设系列之六】数仓管理利器-数据中台

【数仓建设系列之六】数仓管理利器-数据中台介绍 相信看过前面几篇数仓建设系列文章的同学已经对什么是数仓以及如何建设数仓有了充分的认知和了解了&#xff0c;那么问题很多的小明就要问了&#xff0c;既然数仓已经建设起来了&#xff0c;那企业如何管理运营数仓呢&#xff1…

WorkPlus打造智慧企业移动门户,开启高效办公新时代

在移动互联网时代&#xff0c;企业对于高效办公和便捷访问的需求不断增长。WorkPlus作为领先的品牌&#xff0c;致力于打造智慧企业移动门户&#xff0c;帮助企业实现高效协作与便捷访问。本文将重点介绍WorkPlus如何通过创新解决方案&#xff0c;为企业提供定制化的智慧移动门…

Python画图系列——折线图

好看的折线图 import numpy as np import matplotlib.pyplot as plt# 生成随机数据 # np.random.seed(42) # 设置随机种子以确保可重复性 sample_numbers np.arange(1, 21) # 生成1到20的样本编号random_data np.random.rand(20) # 生成20个随机数&#xff0c;范围在0到1之…

企业电子招标采购系统源码之从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理

功能描述 1、门户管理&#xff1a;所有用户可在门户页面查看所有的公告信息及相关的通知信息。主要板块包含&#xff1a;招标公告、非招标公告、系统通知、政策法规。 2、立项管理&#xff1a;企业用户可对需要采购的项目进行立项申请&#xff0c;并提交审批&#xff0c;查看所…

文字处理工具 word 2019 mac中文版改进功能

Microsoft Word 2019 是微软公司的文字处理软件&#xff0c;是 office 2019 套件中的一部分。它是一个功能强大、易于使用的工具&#xff0c;可以帮助用户创建各种类型的文档&#xff0c;包括信函、简历、报告、手册等。 Word 2019 提供了许多功能和改进&#xff0c;包括更好的…

Day 02 python学习笔记

python运算符 算术运算符 混合运算的优先级&#xff1a; () > ** * / // % 高于 - 赋值运算符 - * / ** a 1 > a 3 > a a 3 其余同理 注意&#xff1a; python没有自增自减 &#xff08;a a a-- --a&#xff0…

华为技术有限公司副总裁、计算产品线总裁张熙伟一行到访湖南欧拉生态创新中心座谈交流

9月16日下午&#xff0c;华为技术有限公司&#xff08;简称&#xff1a;华为&#xff09;副总裁、计算产品线总裁张熙伟一行到访湖南欧拉创新中心开展座谈交流。麒麟信安董事长杨涛&#xff0c;麒麟信安高级副总裁刘坤、陈松政&#xff0c;副总裁王攀、颜跃进等参加交流。 华为…

【HTTP】Cookie 和 Session 详解

Cookie 和 Session 一. Cookie1. 什么是 Cookie2. Cookie 的作用3. Cookie 的组成4. Cookie 的组织形式5. Cookie 的传输6. 如何提高 Cookie 的安全性7. Cookie 类 二. Session1. 理解会话机制 (Session)2. Sessoin 的组织形式3. HttpSession 类 三. Cookie 和 Session 的联系与…

ATF编译报错,更新工具链后解决

同一个问题被两个人问到&#xff0c;都是ATF源码编译不过&#xff0c;更新工具链后解决 unknown value armv8.5-a’ for -march cc1: error: unknown value cortex-a55’ for -tune 如果您在编译的时候&#xff0c;也遇到架构或微架构的错误&#xff0c;可尝试更新工具链。 分…

家长监控孩子电脑屏幕的软件有哪些?怎么监控家中孩子的电脑?

在当今信息化社会&#xff0c;互联网已经成为孩子们学习、娱乐和社交的重要平台。然而&#xff0c;网络环境中充斥着各种不良信息和安全隐患&#xff0c;对孩子的身心健康造成了一定的影响。为了保障孩子的网络安全和健康成长&#xff0c;家长们需要采取一定的措施来监控孩子的…

01-初识HTML

01-初识HTML 学习目标&#xff1a; 理解HTML的基本语法掌握排版标签实现标题等效果相对路径和绝对路径媒体标签&#xff08;图片、音频、视频&#xff09;超链接 一、基础认知 了解网页组成和五大浏览器 明确Web标准的构成 1.1 认识网页 以下网页有哪些部分组成 文字、图片、…

一致性检验-简单Kappa

目录 ChatGPT的回答&#xff1a; Kappa的计算 Kappa值的解释 网上给出的资料&#xff1a; 关于Kappa的第一篇论文&#xff1a; Jacob Cohen (1960). "A coefficient of agreement for nominal scales". Educational and Psychological Measurement. 20 (1): 37–…

word 导出 excel导出

Word 文档导出&#xff0c;指定word模板 excel导出

Springboot 实践(20)负载均衡器Ribbon

Ribbon是Netflix发布的负载均衡器&#xff0c;协助控制HTTP和TCP客户端的行为&#xff1b;为Ribbon配置服务提供者地址后&#xff0c;Ribbon就可基于负载均衡算法自动地帮助服务消费者去请求。Ribbon默认提供了很多负载均衡算法&#xff0c;例如&#xff1a;轮询、随机等&#…

ETLCloud助力富勒TMS实现物流数仓同步

富勒TMS提供了多种运输管理业务的解决方案&#xff0c;极大的方便了企业对物流的管理和人力输出&#xff0c;同时提供了大量的API接口&#xff0c;供用户做数据集成和数仓同步。 通过富勒TMS中心&#xff0c;第三方开发者和商家可实现以下功能&#xff1a; MS系统数据同步&…

【智能家居-大模型】构建未来,聆思大模型智能家居交互解决方案正式发布

LISTENAI 近日&#xff0c;国内11家大模型陆续通过《生成式人工智能服务管理暂行办法》备案&#xff0c;多家大模型产品已正式开放&#xff0c;激发了新一轮大模型热潮。大模型在自然语言理解方面的巨大突破&#xff0c;实现了认知智能的技术跃迁&#xff0c;带来了时代的智慧…

记:lora及lorawan的一些概念话

目录 lora常用概念缩写 扩频因子&#xff08;SF&#xff09; 编码率&#xff08;CR&#xff09; 信号带宽&#xff08;BW&#xff09; lora发送参数关系 lora数据包结构 前导码 报头 低数据速率优化 如何简单直白的去理解lorawan协议 水表 电表 Rx1 和 Rx2 ABP 和…

vue-cli创建项目、vue项目目录结(运行vue项目)、es6导入导出语法、vue项目编写规范

vue-cli创建项目、编写vue项目、 1 vue-cli创建项目 1.1 vue-cli 命令行创建项目 1.2 使用vue-cli-ui创建 2 vue项目目录结构 2.1 运行vue项目 2.2 vue项目的目录结构 3 es6导入导出语法 4 vue项目编写规范 4.1 修改项目 4.2 以后写vue项目&#xff0c;只需要在固定位置…