jch-wx_tmsaip/components/tabBar/tabBar.vue

<template>
	<view class="tarbar savepadding">
		<view class="tarbar-list" :style="{
				background: tabBar.backgroundColor,
				color: tabBar.color,
				'border-top': tabBar.position == 'bottom' ? '1rpx solid ' + tabBar.borderStyle : 0,
				'border-bottom': tabBar.position == 'top' ? '1rpx solid ' + tabBar.borderStyle : 0,
				'padding-bottom': paddingHeight + 'px',
			}">
			<view class="tarbar-list-ul">
				<view class="tarbar-list-li" :class="{'tarbar-list-li-center': item.type == 'center'}"
					v-for="(item, index) in tabBar.list" :key="index" @click.top="setSelected(index)">
					<block v-if=" item.type != 'center'">
						<view class="tarbar-list-li-icon">
							<text class="tab-icon iconfont active" :class="item.iconClick"
								v-if="selected == index"></text>
							<text class="tab-icon iconfont" :class="item.icon" v-else></text>
						</view>
						<view :style='selected == index?"color:"+tabBar.selectedColor:""' class="tarbar-list-li-name">
							{{ item.text }}
						</view>
					</block>
					<view class="center-box" v-else>
						<view class="tarbar-list-li-icon">
							<text class="tab-icon iconfont" :class="[item.icon ,{'active': selected == index }]"></text>
						</view>
						<view :style='selected == index?"color:"+tabBar.selectedColor:""' class="tarbar-list-li-name">
							{{ item.text }}
						</view>
					</view>
					<view class="bg" v-if=" item.type == 'center'"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabBar: {
					color: '#999999',
					// selectedColor: '#FE7F00',
					selectedColor: '#2c96fb',
					borderStyle: 'white',
					backgroundColor: '#fff',
					position: 'bottom',
					list: [
						// {
						// 	"type": 'normal',
						// 	"pagePath": "/pages/homePage/manifest/manifest",
						// 	"icon": 'icon-yunshu1',
						// 	"iconClick": 'icon-yunshugongsi',
						// 	"text": "舱单",
						// 	"bgColor": '#e8effc',
						// 	"fontColor": '#333333',
						// 	"title": '舱单',
						// },
						// {
						// 	"type": 'normal',
						// 	"pagePath": "/pages/homePage/moveTrace/moveTrace",
						// 	// "pagePath": "/pages/chatList/chatList",
						// 	"icon": "icon-yunshu1",
						// 	"iconClick": 'icon-yunshugongsi',
						// 	"text": "运踪",
						// 	"bgColor": '#e8effc',
						// 	"fontColor": '#333333',
						// 	"title": '运踪',
						// },
						{
							// "type": 'center',
							"type": 'normal',
							"pagePath": "/pages/home/home",
							"icon": "icon-xinzeng",
							"iconClick": 'icon-xinzeng',
							"text": "首页",
							"bgColor": '#2c96fb',
							// "bgColor": '#e9f0fd',
							"fontColor": '#ffffff',
							"title": '欢迎来到大简云',
						},
						// {
						// 	"type": 'normal',
						// 	"pagePath": "/pages/homePage/vgm/vgm",
						// 	"icon": "icon-yunshu1",
						// 	"iconClick": 'icon-yunshugongsi',
						// 	"text": "VGM",
						// 	"bgColor": '#e8effc',
						// 	"fontColor": '#333333',
						// 	"title": 'VGM',
						// },
						{
							"type": 'normal',
							"pagePath": "/pages/mine/mine",
							"icon": "icon-yunshu1",
							"iconClick": 'icon-yunshugongsi',
							"text": "我的",
							"bgColor": '#e9f0fd',
							"fontColor": '#333333',
							"title": '个人中心',
						}
					]
				},
				selected: this.current, //当前激活项
				paddingHeight: 0,
			};
		},
		props: {
			current: {
				// type: [Number, String],
				type: Number,
				default: 0
			},
		},
		mounted() {
			this.paddingHeight = uni.getSystemInfoSync().safeArea.bottom - uni.getSystemInfoSync().safeArea.height - 20;
			// this.paddingHeight = getApp().globalData.tabBarBottom;
		},
		methods: {
			setSelected1(index) {
				if (this.selected == index) return
				let pages = getCurrentPages();
				let lastIndex = null;
				pages.map((pItem, pIndex) => {
					let page = pItem.$page.fullPath;
					// console.log(page, this.tabBar.list[index].pagePath, index)
					if (page == this.tabBar.list[index].pagePath) {
						// console.log('=====切换======', page, this.tabBar.list[index].pagePath, index)
						lastIndex = pIndex;
					}
				})
				// console.log('====  切换导航  ====', lastIndex)
				if (lastIndex && pages[lastIndex].$page.fullPath == this.tabBar.list[index].pagePath) {
					uni.navigateBack({
						delta: -lastIndex
					});
				} else {
					uni.navigateTo({
						url: this.tabBar.list[index].pagePath,
					})
				}

			},
			setSelected(index) {
				if (this.selected == index) return
				this.$emit('change', index)
			},
		},
		watch: {
			current: {
				handler(val) {
					this.selected = val
					const _this = this
					uni.setNavigationBarTitle({
						title: _this.tabBar.list[val].title
					})
					console.log(_this.tabBar.list[val].bgColor)
					uni.setNavigationBarColor({
						frontColor: _this.tabBar.list[val].fontColor,
						backgroundColor: _this.tabBar.list[val].bgColor,
						animation: {
							duration: 400,
							timingFunc: 'easeIn'
						}
					})
					
				},
				immediate: true
			},
		}
	}
</script>

<style>
	.tarbar {
		width: 100%;
		z-index: 9999;
		position: fixed;
	}

	.tarbar-list {
		width: 100%;
		min-height: 110rpx;
		/* padding-bottom: var(--status-bar-height); */
		background: #4d586f;
		position: fixed;
		left: 0;
		bottom: 0;
		animation-name: example;
		animation-duration: .5s;
		box-shadow: 0 0 30rpx #ccc;
	}

	@keyframes example {
		from {
			bottom: -100%;
		}

		to {
			bottom: 0;
		}
	}

	.tarbar-list-ul {
		width: 100%;
		height: 110rpx;
		padding: 10rpx 46rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.tarbar-list-li {
		width: 80rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* 这里是添加样式 */
		margin: 0 auto; 
	}

	.tarbar-list-li-icon {
		width: 50rpx;
		height: 50rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: -8rpx;
	}

	.tarbar-list-li-icon image {
		width: 36rpx;
		height: 36rpx;
	}

	.tarbar-list-li-icon .tab-icon {
		font-size: 52rpx;

	}

	.tarbar-list-li-icon .active {
		/* color: #FF5A23; */
		color: #2c96fb;
	}

	.tarbar-list-li-name {
		width: 100%;
		text-align: center;
		line-height: 30rpx;
		font-size: 22rpx;
		height: 30rpx;
	}

	.tarbar-list-li-center {
		width: 100rpx;
		background: #fff;
		height: 100rpx;
		margin-top: -28px;
		border-radius: 50%;
		position: relative;
		box-shadow: 0 -10rpx 15rpx -5rpx #ccc;
	}

	.center-box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100rpx;
		height: 140rpx;
		padding-top: 36rpx;
		z-index: 2;
	}

	.tarbar-list-li-center .bg {
		position: absolute;
		top: 23px;
		left: -12px;
		width: 150rpx;
		height: 76rpx;
		z-index: 0;
		background: #fff;
	}

	.center-box .tarbar-list-li-icon {
		margin-bottom: 19rpx;
	}

	.center-box .tarbar-list-li-icon .iconfont {
		font-size: 76rpx;
		margin-bottom: 10rpx;
	}

	/* .savepadding{
	    padding-bottom: constant(safe-area-inset-bottom);  
	    padding-bottom: env(safe-area-inset-bottom); 
	    box-sizing: content-box;
	}
	
	.savebottom{
	    bottom: constant(safe-area-inset-bottom);  
	    bottom: env(safe-area-inset-bottom); 
	} */
</style>