jobslink-user-clent/components/CustomTabbar/custom_tabbar.vue

<template>
	<view class="tabbar_container">
		<view class="tabbar_item" v-for="(item, index) in tabbarList"  :key="index" @click="changeItem(item)">
			<view class="item-top">
				<image :src="currentItem == item.id ? item.selectedIconPath : item.iconPath"
				:class="[item.centerItem ? 'center-item-img' : '']"></image>
			</view>	
			<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
				<text>{{ item.text }}</text>
			</view>
		</view>
	</view>
</template>

<script>
    let listSrc = require('../../static/img/tabbar/homeactive.png');
    let listSrc2 = require('../../static/img/tabbar/home.png');
    let newsSrc = require('../../static/img/tabbar/addactive.png');
    let newsSrc2 = require('../../static/img/tabbar/add.png');
    let recruitSrc = require('../../static/img/tabbar/recruit.png');
    let recruitSrc2 = require('../../static/img/tabbar/activeRecruit.png');
	export default {
		data() {
			return {
				currentItem: 0,
				tabbarList: [{
					id: 0,
					text: "招工列表",
					path: '/pages/recruit/subPage/index',
					iconPath: listSrc2,
					selectedIconPath: listSrc,
					centerItem: false,
				},
				{
					id: 1,
					text: "发布招工",
					path: '/pages/recruit/subPage/recruit',
					iconPath: recruitSrc2,
					selectedIconPath:recruitSrc,
					centerItem: true,
				},
				{
					id: 2,
					text: "消息",
					path: '/pages/recruit/subPage/MessageList',
					iconPath: newsSrc2,
					selectedIconPath: newsSrc,
					centerItem: false,
				}],
			}
		},
		props: {
			currentpage: {
				type: Number,
				required: true,
				default: 0,
			}
		},
		mounted() {
			this.currentItem = this.currentpage
			uni.hideTabBar()
		},
		methods: {
			changeItem(item) {
				// uni.switchTab({
				// 	url: item.path
				// })
                uni.navigateTo({
                    url: item.path
                })
			}
		},
	}
</script>

<style lang="scss" scoped>
	.tabbar_container{
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		width: 100%;
		height: 100rpx;
		box-shadow: 0 0 5px #999;
		display: flex;
		align-items: center;
		padding: 5rpx 0;
		padding-bottom: env(safe-area-inset-bottom);
		.tabbar_item{
			width: 33.33%;
			height: 100rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			position: relative;
			.item-top{
				width: 48rpx;
				height: 48rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.item-bottom{
                font-size: 24rpx;
			}
		}
	}

	.center-item-img{
		position: absolute;
        z-index: -1;
		top: -68rpx;
		left: calc(50% - 53rpx - 16rpx);
		width: 106rpx !important;
		height: 106rpx !important;
        background-color: #FFFFFF;
        padding: 16rpx;
        border-radius: 50%;
        
	}
	.item-active{
		color: #4071f8;
	}
</style>