uni-app 中两个系统各自显示不同的tabBar

最近在一个uni-app项目中遇到一个需求,在登录页面成功登录以后需要判断身份,不同的身份的进入不同的tabBar页面,但是在uni-app项目中pages.json中的tabBarlist数组只有一个,且不能写成动态的,那如何实现这个需求呢?答案是需要我们自定义tabBar

目录

1、我们确定在 pages.json文件中的pages数组中的第一个页面就是进入程序时展示的第一个页面,那这个页面肯定就是我们的登录页面了。

2、将pages.json中的tabBar的list设置为空数组,即不再使用默认系统自带的tabBar组件。

3、创建tabBar.vue组件,组件内的代码内容如下。

4、在main.js文件中将自定义的tabBar定义为全局组件。

5、在每一个原本将要设置为tabBar的子页面添加我们自定义的tabBar组件。

6、创建一个新的页面来进行对不同系统进行操作

7.设置完后需要在每个tabbar页面中配置css  


1、我们确定在 pages.json文件中的pages数组中的第一个页面就是进入程序时展示的第一个页面,那这个页面肯定就是我们的登录页面了。
2、将pages.json中的tabBarlist设置为空数组,即不再使用默认系统自带的tabBar组件。
3、创建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 class="tab_img" :src="currentIndex == index ? item.selectedIconPath : item.iconPath"></image>
			<view class="tab_text" :style="{ color: currentIndex == index ? selectedColor : color }">{{ item.text }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			selectedIndex: {
				// 当前选中的tab index
				default: 0,
			},
		},
		data() {
			return {
				color: '#666666',
				selectedColor: '#00BAB2',
				list: [],
				currentIndex: 0,
			};
		},
		created() {
			this.currentIndex = this.selectedIndex;

			var _this = this;

			if (uni.getStorageSync('system') == 'diagnosis') {
				//故障诊断系统
				_this.list = [
					{
						pagePath: '/pages/terbineList/index',
						iconPath: '/static/images/tabbar/terbine.png',
						selectedIconPath: '/static/images/tabbar/terbine_select.png',
						// "text": "风机列表"
					},
					{
						pagePath: '/pages/warningList/index',
						iconPath: '/static/images/tabbar/warning.png',
						selectedIconPath: '/static/images/tabbar/warning_select.png',
						// "text": "预警列表"
					},
					{
						pagePath: '/pages/mine/index',
						iconPath: '/static/images/tabbar/mine.png',
						selectedIconPath: '/static/images/tabbar/mine_select.png',
						// "text": "我的"
					},
				];
			} else {
				//能源利用与分布系统
				_this.list = [
					{},
					{},
					{},
					{
						pagePath: '/pages/mine/index',
						iconPath: '/static/images/tabbar/mine.png',
						selectedIconPath: '/static/images/tabbar/mine_select.png',
						// "text": "我的"
					},
				];
			}
		},
		methods: {
			switchTab(item, index) {
				this.currentIndex = index;
				let url = item.pagePath;
				uni.redirectTo({ url: url });
			},
		},
	};
</script>

<style lang="scss">
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: #05112f;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部

		.tab-bar-item {
			flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.tab_img {
				width: 37rpx;
				height: 41rpx;
			}
			.tab_text {
				font-size: 20rpx;
				margin-top: 9rpx;
			}
		}
	}
</style>

这里需要注意:里面的图片路径要写成绝对路径,不然打包的时候如果是在该项目下的页面会出现层级问题,显示不出来图片

4、在main.js文件中将自定义的tabBar定义为全局组件。
import tabBar from "components/tabBar/tabBar.vue"
Vue.component('tabBar',tabBar)
5、在每一个原本将要设置为tabBar的子页面添加我们自定义的tabBar组件。
//就在不同的tabbar页面中添加这一行    index 根据在tabbar中List集合中进行设置
//第一个页面
<tabBar selectedIndex = 0></tabBar>

//第二个页面
<tabBar selectedIndex = 1></tabBar>
6、创建一个新的页面来进行对不同系统进行操作

通过uni.setStorageSync('system', 'diagnosis'); 来判断进入的系统

<template>
	<view>
		<uni-section title="请选择您要进入的系统" titleColor="#ffffff" type="line" class="titleStyle" />
		<view class="button-group">
			<button type="primary" plain="true" @click="handleButtonClick(1)">{{ energySystem }}</button>
			<button type="primary" plain="true" @click="handleButtonClick(2)">{{ diagnosisSystem }}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				energySystem: '故障诊断系统',
				diagnosisSystem: '能源利用与分布系统',
			};
		},
		methods: {
			handleButtonClick(systemId) {
				if (systemId === 1) {
					// 进入故障诊断系统
					uni.setStorageSync('system', 'diagnosis');
					uni.navigateTo({
						url: '/pages/terbineList/index',
					});
				} else if (systemId === 2) {
					// 进入能源利用与分布系统
					uni.setStorageSync('system', 'energy');
					uni.navigateTo({
						url: '/pages/mine/index',
					});
				}
			},
		},
	};
</script>

<style>
	.titleStyle {
		font-size: 20rpx;
	}
	.button-group {
		flex-direction: column;
		align-items: center;
		width: 60%;
		height: auto;
		margin-left: 150rpx;
	}
	button {
		margin: 200rpx auto;
	}
</style>
7.设置完后需要在每个tabbar页面中配置css  

一定要用这样的格式

.tarbarStyle {  //tarbarStyle
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
	}
	.dataInfo { //tabbar上面的信息展示 
		margin-bottom: 50px; /* 根据 tabBar 的高度进行调整 */
	}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

四、HarmonyOS应用开发-ArkTS开发语言介绍

目录 1、TypeScript快速入门 1.1、编程语言介绍 1.2、基础类型 1.3、条件语句 1.4、函数 1.5、类 1.6、模块 1.7、迭代器 2、ArkTs 基础&#xff08;浅析ArkTS的起源和演进&#xff09; 2.1、引言 2.2、JS 2.3、TS 2.4、ArkTS 2.5、下一步演进 3、ArkTs 开发实践…

【C语言】循环语句(语句使用建议)

文章目录 **while循环****while循环的实践****补充:if语句与while语句区别****for循环(使用频率最高)****for循环的实践****while循环和for循环的对比****Do-while循环****break和continue语句****循环的嵌套****goto语句(不常用)****循环语句的效率(来自于高质量的C/C编程书籍…

竞赛 GRU的 电影评论情感分析 - python 深度学习 情感分类

1 前言 &#x1f525;学长分享优质竞赛项目&#xff0c;今天要分享的是 &#x1f6a9; GRU的 电影评论情感分析 - python 深度学习 情感分类 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;4分 这…

Excel使用VLOOKUP函数

VLOOKUP(lookup_value,table_array,col_index_num,range_lookup) 释义&#xff1a; lookup_value&#xff1a;要查找的值&#xff0c;包括数字&#xff0c;文本等 table_array&#xff1a;要查找的值以及预期返回的内容所在的区域 col_index_num&#xff1a;查找的区域的列…

mysql配置

MySQL数据库的介绍 MySQL是一个关系型数据库管理系统&#xff0c;在 WEB 应用方面&#xff0c;MySQL是最好的 RDBMS (Relational Database Management System&#xff0c;关系数据库管理系统) 应用软件&#xff0c;它是由瑞典MySQL AB 公司开发&#xff0c;目前属于 Oracle 旗…

拿来就能用 | ESP AI音箱方案介绍

本案例使用ESP-BOX和OpenAI API开发一款语音控制的聊天机器人(chatbot)。 猜猜我是谁&#xff1f;ESP AI音箱方案体验 ESP-BOX AI音箱方案介绍 本案例将介绍如何使用ESP-BOX和OpenAI API开发一款语音控制的聊天机器人。该系统可以接收用户的语音指令&#xff0c;将其展示在屏幕…

敏捷开发最佳实践:学习与改进维度实践案例之会诊式培养敏捷教练

自组织团队能够定期反思并采取针对性行动来提升人效&#xff0c;但2022年的敏捷调研发现&#xff0c;70%的中国企业在学习和改进方面仍停留在团队级。本节实践案例将分享“会诊式培养敏捷教练”的具体做法&#xff0c;突出了敏捷以人为本的学习和改进&#xff0c;强调了通过人员…

阿里云轻量应用服务器和ECS服务器有啥区别?2024年整理对比表

阿里云服务器ECS和轻量应用服务器有什么区别&#xff1f;轻量和ECS优缺点对比&#xff0c;云服务器ECS是明星级云产品&#xff0c;适合企业专业级的使用场景&#xff0c;轻量应用服务器是在ECS的基础上推出的轻量级云服务器&#xff0c;适合个人开发者单机应用访问量不高的网站…

简介:使用TensorFlow实现python简版神经网络模型

如果你想进一步深入AI编程的魔法世界&#xff0c;那么TensorFlow和PyTorch这两个深度学习框架将是你的不二之选。它们可以帮助你构建更加复杂的神经网络模型&#xff0c;实现图像识别、语音识别等高级功能。 模型原理&#xff1a;神经网络是一种模拟人脑神经元结构的计算模型&a…

抖音视频批量下载软件可导出视频分享链接|手机网页视频提取|视频爬虫采集工具

解锁抖音视频无水印批量下载新姿势&#xff01; 在快节奏的生活中&#xff0c;抖音作为时下最热门的短视频平台之一&#xff0c;吸引着广大用户的目光。而如何高效地获取喜欢的视频内容成为了许多人关注的焦点。Q:290615413现在&#xff0c;我们推出的抖音视频批量下载软件&…

【概念】神马是分布式?

SueWakeup​​​​​ 个人主页&#xff1a;SueWakeup 系列专栏&#xff1a;学习Java框架 个性签名&#xff1a;保留赤子之心也许是种幸运吧 本文封面由 凯楠&#x1f4f7; 友情赞助播出&#xff01; 目录 前言 1. 系统架构的演变 2. SOA 与微服务的关系 3. 分布式核心知识…

元器件应用中的深力科推荐SZ1SMA5945BT3G 车规级齐纳二极管

SZ1SMA5945BT3G是一款1.5W齐纳二极管是为通用电压调节应用而设计的。 安森美深力科齐纳二极管专为稳压电路设计&#xff0c;提供广泛的工作电压和额定功率。 关于齐纳二极管基本知识&#xff1a; 齐纳二极管&#xff0c;又称稳压二极管。利用PN结的反向击穿状态&#xff0c;…

开发语言详解(python、java、Go(Golong)。。。。)

是语言决定行业&#xff0c;还是行业决定语言&#xff0c;说不清&#xff0c;只是觉得&#xff0c;当你做这一行的时候&#xff0c;如果你还有精力感兴趣的话&#xff0c;可以再做些了解&#xff0c;一下是自己个人见解以及官网做的整合。希望对大家有用。 目录 Python 概念&…

微软聘请了谷歌DeepMind的联合创始人

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

C#中右键通过listview来控制datagridview字段值的是否显示、显示顺序,并存储到XML中。

最终显示效果&#xff0c;如下图所示&#xff1a; datagridview开始显示通过调用XML存储的字段值及顺序来显示&#xff0c;右键调出Tools来控制显示的顺序及是否显示&#xff0c;通过加号和减号进行调整顺序。 XML存储字段值及顺序 主要代码及事件&#xff1a; 获取datagridv…

前后端分离项目springsecurity实现用户登录认证快速使用

目录 1、引入依赖 2、创建类继承WebSecurityConfigurerAdapter &#xff08;1&#xff09;重写里面的configure(HttpSecurity http)方法 &#xff08;2&#xff09;重写AuthenticationManager authenticationManagerBean() &#xff08;3&#xff09;密码加密工具 3、继承…

支付宝手机网站支付,微信扫描二维码支付

支付宝手机网站支付 支付宝文档 响应示例 <form name"punchout_form" method"post" action"https://openapi.alipay.com/gateway.do?charsetUTF-8&methodalipay.trade.wap.pay&formatjson&signERITJKEIJKJHKKKKKKKHJEREEEEEEEEEEE…

【用法总结】Systrace使用基础

【用法总结】Systrace使用基础 一、systrace基本介绍被弃用了?二、快捷键用法二、systrace命令用法2.1 命令格式:2.2 option取值:2.3 category取值:2.4 命令用法举例:2.5 快捷键用法:三、systrace报告怎么看?3.1 CPU调度信息3.2 线程状态信息3.2.1 绿色 : 运行中(Runni…

MyBatis3源码深度解析(十七)MyBatis缓存(一)一级缓存和二级缓存的实现原理

文章目录 前言第六章 MyBatis缓存6.1 MyBatis缓存实现类6.2 MyBatis一级缓存实现原理6.2.1 一级缓存在查询时的使用6.2.2 一级缓存在更新时的清空 6.3 MyBatis二级缓存的实现原理6.3.1 实现的二级缓存的Executor类型6.3.2 二级缓存在查询时使用6.3.3 二级缓存在更新时清空 前言…

thresh:基于Flutter的移动跨平台动态UI框架

Hello大家好&#xff01;我是咕噜铁蛋&#xff01;在移动应用开发的领域里&#xff0c;跨平台框架一直是一个热门话题。随着技术的不断发展&#xff0c;开发者们对于能够快速构建高质量、多平台兼容的应用的需求也越来越强烈。而Flutter&#xff0c;作为Google推出的一个高性能…