BJYSYBZ/YSGZYBZ_WXAPP/components/tabBar/tabBar.vue

<template>
	<view class="tabBarBox">
		<view class="tabBarItem" v-for="(item, index) in lists" :key="index" @click="clickHandle(item, index)">
			<image :src="(currentIndex === index) ? item['selectedIconPath'] : item['iconPath']"></image>
			<text :style="{'color': (currentIndex === index) ? item['selectedColor'] : item['color']}">{{item['name']}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tabBar",
		data() {
			return {
				lists: [
					{
						name: '待签收',
						iconPath: '/static/images/received.png',
						selectedIconPath: '/static/images/received_selected.png',
						color: '#A6AAB2',
						selectedColor: '#6495F0',
						component: 'received'
					},
					{
						name: '待核查',
						iconPath: '/static/images/nocheck.png',
						selectedIconPath: '/static/images/nocheck_selected.png',
						color: '#A6AAB2',
						selectedColor: '#6495F0',
						component: 'nocheck'
					},
					{
						name: '已核查',
						iconPath: '/static/images/checked.png',
						selectedIconPath: '/static/images/checked_selected.png',
						color: '#A6AAB2',
						selectedColor: '#6495F0',
						component: 'checked'
					},
					{
						name: '我的',
						iconPath: '/static/images/me.png',
						selectedIconPath: '/static/images/me_selected.png',
						color: '#A6AAB2',
						selectedColor: '#6495F0',
						component: 'me'
					},
				]
			};
		},
		props: {
			currentIndex: {
				type: Number,
				default: 0
			}
		},
		methods: {
			clickHandle(item, index){
				this.$emit('tabClick', item)
				uni.$emit('setIndexEvent', index)
			}
		}
	}
</script>

<style lang="scss">
.tabBarBox {
	height: $tabbar-height;
	display: flex;
	text-align: center;
	align-items: center;
	>view {
		flex: 1;
		display: flex;
		flex-direction: column;
		text-align: center;
		align-items: center;
		>text {
			margin-top: 2px;
			font-size: 12px;
		}
		>image {
			width: 24px;
			height: 24px;
		}
	}
}
</style>