project/pages/common/tabBar.vue

<template>
	<view class="uni-tabbar">
		<view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(item)" 
		:class="item.centerItem ? ' center-item' : '' " >
			<!-- <view class="icon" :class="[item.fontIcon , item.pagePath == pagePath?'uni-active':'']"></view> -->
			<!-- 上面使用的是字体图标，解决切换页面的时候图标会闪的效果，毕竟每切换一个页面都会闪一下不太好看，可以切换使用下面的图片方式 -->
			<view class="uni-tabbar__bd">
				<view class="uni-tabbar__icon">
					<image v-if="item.pagePath == pagePath" :class="item.text=='首页'?'w56':''" class="uni-w-42 uni-h-42"
						:mode="'scaleToFill'" :src="item.selectedIconPath"></image>
					<image v-else class="uni-w-42 uni-h-42" :mode="'scaleToFill'" :src="item.iconPath"></image>
				</view>
			</view>
			<view class="uni-tabbar__label" :class="{'active': item.pagePath == pagePath}">
				{{item.text}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			pagePath: null
		},
		data() {
			return {
				page: "pages/homepage/index",
				showPage: false,
				containerHeight: 400,
				tabbar: [{
						"pagePath": "pages/home/index",
						"iconPath": "/static/images/t_homepage.png",
						"selectedIconPath": "/static/images/homepage.png",
						"text": "首页",
						"centerItem": false
					},
					{
						"pagePath": "pages/index/index",
						"iconPath": "/static/images/t_home.png",
						"selectedIconPath": "/static/images/t_home_sc.png",
						"text": "资讯",
						"centerItem": false
					},
					{
						"pagePath": "pages/bluntShut/index",
						"iconPath": "/static/images/blunt_sc.png",
						"selectedIconPath": "/static/images/blunt_sc.png",
						"text": "冲关",
						"centerItem": true
					}, {
						"pagePath": "pages/class/attentClass/index",
						"iconPath": "/static/images/t_class.png",
						"selectedIconPath": "/static/images/t_class_sc.png",
						"text": "上课",
						"centerItem": false
					},
					{
						"pagePath": "pages/my/index",
						"iconPath": "/static/images/t_my.png",
						"selectedIconPath": "/static/images/t_my_sc.png",
						"text": "我的",
						"centerItem": false
					}
				]
			}
		},
		mounted() {
			let userType = uni.getStorageSync('userInfo').userType;
			if (userType == 3) {
				this.tabbar = [{
						"pagePath": "pages/homepage/index",
						"iconPath": "/static/images/t_homepage.png",
						"selectedIconPath": "/static/images/homepage.png",
						"text": "首页",
						"centerItem": false
					},
					{
						"pagePath": "pages/index/index",
						"iconPath": "/static/images/t_home.png",
						"selectedIconPath": "/static/images/t_home_sc.png",
						"text": "资讯",
						"centerItem": false
					},
					{
						"pagePath": "pages/teach/index",
						"iconPath": "/static/images/t_teach.png",
						"selectedIconPath": "/static/images/t_teach.png",
						"text": "教学",
						"centerItem": true
					}, {
						"pagePath": "pages/correct/index",
						"iconPath": "/static/images/t_correct.png",
						"selectedIconPath": "/static/images/t_correct_sc.png",
						"text": "批改",
						"centerItem": false
					},
					{
						"pagePath": "pages/my/index",
						"iconPath": "/static/images/t_my.png",
						"selectedIconPath": "/static/images/t_my_sc.png",
						"text": "我的",
						"centerItem": false
					}
				]
			} else {
				this.tabbar = [{
						"pagePath": "pages/homepage/index",
						"iconPath": "/static/images/t_homepage.png",
						"selectedIconPath": "/static/images/homepage.png",
						"text": "首页",
						"centerItem": false
					},
					{
						"pagePath": "pages/index/index",
						"iconPath": "/static/images/t_home.png",
						"selectedIconPath": "/static/images/t_home_sc.png",
						"text": "资讯",
						"centerItem": false
					},
					{
						"pagePath": "pages/bluntShut/index",
						"iconPath": "/static/images/blunt_sc.png",
						"selectedIconPath": "/static/images/blunt_sc.png",
						"text": "冲关",
						"centerItem": true
					}, {
						"pagePath": "pages/class/attentClass/index",
						"iconPath": "/static/images/t_class.png",
						"selectedIconPath": "/static/images/t_class_sc.png",
						"text": "上课",
						"centerItem": false
					},
					{
						"pagePath": "pages/my/index",
						"iconPath": "/static/images/t_my.png",
						"selectedIconPath": "/static/images/t_my_sc.png",
						"text": "我的",
						"centerItem": false
					}
				]
			}
		},
		methods: {
			changeTab(item) {
				this.page = item.pagePath;
				// 这里使用reLaunch关闭所有的页面，打开新的栏目页面
				uni.reLaunch({
					url: `/${this.page}`
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	[nvue] uni-scroll-view,
	[nvue] uni-swiper-item,
	[nvue] uni-view {
		flex-direction: unset;
	}

	[nvue-dir-column] uni-swiper-item,
	[nvue-dir-column] uni-view {
		flex-direction: unset;
	}

	.uni-tabbar {
		position: fixed;
		display: flex;
		bottom: 0;
		// bottom: 176px;
		z-index: 999;
		width: 100%;
		align-items: center;
		justify-content: space-around;
		
		height: 104rpx;
		background: #FFFFFF;
		// border-top: solid 1rpx #e5e5e5;
		box-sizing: border-box;

		.uni-tabbar__item {
			display: block;
			line-height: 24rpx;
			font-size: 22rpx;
			text-align: center;
		}
		.center-item{
			display: block;
			position: relative;
			
			.uni-tabbar__bd {
				background-color: #C4C6CF;
				border-radius: 50%;
				padding: 10rpx;
				position: absolute;
				top: -100rpx;
				left: calc(50% - 50rpx);
				border-radius: 50%;
				// box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.16);
				/* box-shadow: 0 0 5px #999;  */
				background-color: #ffffff;
			
				.uni-tabbar__icon {
					height: 80rpx;
					width: 80rpx;
					text-align: center;
					
					image {
						height: 80rpx;
						width: 80rpx;
					}
			
					.w56 {
						width: 54rpx;
						height: 54rpx;
						margin-top: 0rpx;
					}
				}
			}
			.uni-tabbar__label{
				position: absolute;
				width:100rpx;
				top: 20rpx;
				left: calc(50% - 50rpx);
			}
		}
		.uni-tabbar__bd {
			display: flex;
			justify-content: center;
			margin-bottom: 8rpx;

			.uni-tabbar__icon {
				height: 54rpx;
				width: 54rpx;
				text-align: center;

				image {
					height: 54rpx;
					width: 54rpx;
				}

				.w56 {
					width: 54rpx;
					height: 54rpx;
					margin-top: 0rpx;
				}
			}
		}

		.uni-tabbar__label {
			font-size: 22rpx;
			color: #60646E;

			&.active {
				color: #FDCB08;
			}
		}

	}
</style>