uniProject/pages/chanpinXuanze/components/footTabbar.vue

<template>
	<view class="ezy-custom-tabbar">
		<view class="tabbar-item-box">

			<view class="tabbar-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(item.path,index)" :class="{active: index == currentTabNumber}"
				:style="{ backgroundImage: 'url(' + (currentTab == index ? item.activePath : item.iconPath) + ')' }">
			</view>
		</view>
	</view>
</template>

<script>
	import {
		nextTick,
	} from "vue";
	export default {
		data() {
			return {
				tabList: [{
						iconPath: 'static/images/tabbar/unselect/plan-sj.png',
						activePath: 'static/images/tabbar/select/plan-sj.png',
						path: `/pages/study/index`
					},
					{
						iconPath: 'static/images/tabbar/unselect/xinqing-sj.png',
						activePath: 'static/images/tabbar/select/xinqing-sj.png',
						path: `/pages/zhuanti/index`
					},
					{
						iconPath: 'static/images/tabbar/unselect/partner-sj.png',
						activePath: 'static/images/tabbar/select/partner-sj.png',
						path: '/pages/game/index'
					},
					{
						iconPath: 'static/images/tabbar/unselect/my-sj.png',
						activePath: 'static/images/tabbar/select/my-sj.png',
						path: `/pages/my/index`
					},
				],
				currentTab: 0,
			};
		},
		props: {
			currentTabNumber: {
				type: Number,
			},
		},
		methods: {
			switchTab(path, index) {

		

			},
		},
		created() {

			this.currentTab = this.currentTabNumber
		}
	}
</script>