Anti-fraud-mobile/components/Tabbar/index.vue

<template>
	<view class="tabbar-container">
		<view class="tabbar-item" v-for="(item, index) in tabbarList" :key="item.id" :class="item.position" @click="changeItem(item)">
			<view class="item-top">
				<image :src="currentItem == item.id ? item.selectIcon : item.icon"></image>
			</view>
			<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
				<text>{{ item.text }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Tabbar",
		props: {
			currentPage: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				currentItem: 0,
				tabbarList: [{
						id: 0,
						path: '/pages/index/index',
						icon: "/static/tabbar/home.png",
						selectIcon: "/static/tabbar/home_ac.png",
						text: '',
						position: 'left'
					},
					{
						id: 1,
						path: '/pages/video/index',
						icon: "/static/tabbar/video.png",
						selectIcon: "/static/tabbar/video_ac.png",
						text: '',
						position: 'left left_last' // 左侧元素的最后一个，为了找到具体元素添加圆角
					},
					{
						id: 2,
						path: '/pages/exercise/index',
						icon: "",
						selectIcon: "",
						text: '答题',
						position: 'center'
					},
					{
						id: 3,
						path: '/pages/me/index',
						icon: "/static/tabbar/msg.png",
						selectIcon: "/static/tabbar/msg_ac.png",
						text: '',
						position: 'right'
					},
					{
						id: 4,
						path: '/pages/me/me',
						icon: "/static/tabbar/me.png",
						selectIcon: "/static/tabbar/me_ac.png",
						text: '',
						position: 'right'
					}
				]
			};
		},
		mounted() {
			this.currentItem = this.currentPage;
			console.log('currentItem', this.currentItem,this.currentPage)
			// 非微信小程序需隐藏原生tabBar（微信小程序已通过"custom": true配置项隐藏原生tabbar）
			if (process.env.VUE_APP_PLATFORM != 'mp-weixin') {
				uni.hideTabBar()
			}
		},
		methods: {
			changeItem(item) {
				uni.switchTab({
					url: item.path
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tabbar-container {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 5rpx 0;
		box-shadow: 0 -20rpx 40rpx 4rpx rgba(0, 0, 0, 0.1);
		background-color: rgba(0, 0, 0, 0.1);

		.tabbar-item {
			width: 20%;
			height: 120rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;

			.item-top image {
				width: 50rpx;
				height: 50rpx;
			}

			.item-bottom {
				font-size: 28rpx;
				width: 100%;
			}
		}

		.left {
			flex: 1;
			background-color: #fff;
			display: flex;
		}

		.left_last {
			border-top-right-radius: 20rpx;
		}

		.center {
			width: 159rpx;
			background: radial-gradient(circle at 50% 0rpx, transparent 80rpx, white 0) top left 100% no-repeat;
			position: relative;


			.item-bottom {
				text-align: center;
				line-height: 130rpx;
				position: absolute;
				background: linear-gradient(45deg, #f84a1a, #ffa53e);
				border-radius: 50%;
				top: -60rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 130rpx;
				height: 130rpx;
				color: #fff;
				font-size: 20px;
			}

			&+.right {
				border-top-left-radius: 20rpx;
			}

		}

		.right {
			flex: 1;
			background-color: #fff;
			display: flex;
		}
	}
</style>