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

这篇具有很好参考价值的文章主要介绍了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 不同的tabbar,前端,app,uni-app,前端

通过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  

一定要用这样的格式

uni 不同的tabbar,前端,app,uni-app,前端文章来源地址https://www.toymoban.com/news/detail-850062.html

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

到了这里,关于uni-app 中两个系统各自显示不同的tabBar的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 不同平台使用不同技术实现微信好友、朋友圈分享汇总(H5、taro、uni-app)

    人生路漫漫,坑,是活久了见。程序猿世界里各种奇葩的需求都有,随之而来的各种坑也是层出不穷。 应前IBM同事邀请特来做分享的专题总结。一般人我不告诉他,刷到的朋友们就赚到了,你懂的~~~~~~收藏吧!   事情前情概述,昨天IBM的同事前来咨询我怎样实现微信分享功

    2024年02月15日
    浏览(82)
  • (uni-app)navigationBarTitleText标题不显示

    原因是,虽然globalStyle中配置了navigationBarTitleText,但是pages中各个页面同样配置了navigationBarTitleText,这样一来pages中的会覆盖globalStyle中的全局配置,特别是刚创建的项目容易出现这样的问题。  

    2024年02月06日
    浏览(45)
  • uni-app打包后安卓不显示地图及相关操作详解

    新公司最近用uni-app写app,之前的代码有很多问题,正好趁着改bug的时间学习下uni-app。 使用uni-app在浏览器调试的时候,地图是展示的,但是打包完成后,在app端是空白的。咱第一次写app,啥也不懂啊不是。 附上一张浏览器调试的截图: 安卓app上是空白页,就不附图了。 因为

    2024年02月11日
    浏览(71)
  • uni-app框架 微信小程序页面显示正常,但安卓页面样式显示异常

    今天在继续复习uni-app项目时,使用模拟器运行时,突然发现封装的search组件样式无法正常显示,但是小程序页面又是正常的,打包后真机也是一样的结果。在uni-app的控制台报如下错误: [Vue warn]: Error in render: “TypeError: Cannot read property ‘children’ of undefined” TypeError: Cannot rea

    2024年04月11日
    浏览(69)
  • uni-app实现点击显示隐藏列表,兼容微信小程序

    效果:    小程序打印的结果:值一直为true   如果你试过v-if不生效,又试了v-show,还是不行!!千万不要着急! 不是自己写的不对,而是uni-app和微信小程序修改值的方式不一致造成的。反正就是不承认是自己的问题。 其实解决的办法也很简单,就是要兼容两端,写出符合

    2024年02月09日
    浏览(69)
  • 前端vue uni-app百度地图定位组件,显示地图定位,标记点,并显示详细地址

    快速实现前端百度地图定位组件,显示地图定位,标记点,并显示详细地址; 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下:     代码如下: # 百度地图定位组件,显示地图定位,标记点,并显示详细地址 #### 使用方法 ```使用方法 #安装vue-baidu-map插件

    2024年02月08日
    浏览(65)
  • uni-app qiun-data-charts无法显示tooltip

    去除父级的position: relative

    2024年01月22日
    浏览(65)
  • VUE(uni-app框架)开发微信小程序③-显示隐藏

    uni-app控制显示隐藏的方式有两种,【v-if】 和   【v-show】 v-if:通过控制虚拟dom树的节点来达到控制式样的显示和隐藏,当参数为false的时候,该节点被删掉,当为true的时候则显示。 v-show:通过css样式中的dispaly:none来控制元素的显示和隐藏 代码如下: 显示效果如下:  通

    2024年02月16日
    浏览(59)
  • uni-app 小程序 uni.showToast字数超过两行自动省略显示不全问题

    如图: uni.showToast() 显示消息提示框,显示图标时, title 文本最多显示 7 个汉字长度,在不显示图标的情况下,大于两行不显示。 可以选择更换为使用uni.showModal

    2024年02月13日
    浏览(43)
  • uni-app小程序 uni.showToast字数超过两行自动省略显示不全问题

    在实际开发过程中如果用户提交某些文件时,如果缺少某些条件我们要提醒用户缺少那些条件才能提交,但是如果我们用 uni.showToast提醒的次数超过7个字 的时候就会导致文字显示不全,达不到提醒的效果,这种时候我们就需要使用 uni.showModa显示态弹窗 主要使用的参数是:

    2024年01月19日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包