book/unimall-app/components/tarbar.vue

<template>
	<view class="tarbar">
		<view v-for='(item,index) in datas' @tap="tabClick(index,item.urls,item.id)">
			<!-- <u-icon :color="item.color" :name="item.icon" size="60"></u-icon> -->
			<image v-if='i==index' style='width:40rpx;height:40rpx;margin-top:10rpx;' :src='item.actionIcon'></image>
			<image v-else style='width:40rpx;height:40rpx;margin-top:10rpx;' :src='item.icon'></image>
			<view v-text="item.name"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props:["totarBer"],//从父组件传来的值 来控制点击当前的颜色
		data() {
			return {
				i:0,
				datas: [{
						urls: '/pages/home/home',
						icon: '/static/menu/chat.png',
						actionIcon: '/static/menu/chat_s.png',
						name: '消息',
						id: 1,
					},
					{
						urls: '/pages/addressBook/addressBook',
						icon: '/static/menu/contact.png',
						actionIcon: '/static/menu/contact_s.png',
						name: '通讯录',
						id: 2,
					},
					{
						urls: '/pageC/find/find',
						icon: '/static/menu/see.png',
						actionIcon: '/static/menu/see_s.png',
						name: '发现',
						id: 3,
					},
					{
						urls: '/pageC/my/index',
						icon: '/static/menu/my.png',
						actionIcon: '/static/menu/my_s.png',
						name: '我',
						id: 4,
					},
				],
			}
		},
		created() {
			this.i=this.totarBer.id-1
		//用来控制是显示当前页面的tarBar图标变亮
			if(this.totarBer.id==2){
				this.$set(this.datas[1],'color',this.totarBer.color)
			}
			if(this.totarBer.id==1){
				this.$set(this.datas[0],'color',this.totarBer.color)
			}
			if(this.totarBer.id==3){
				this.$set(this.datas[2],'color',this.totarBer.color)
			}
			if(this.totarBer.id==4){
				this.$set(this.datas[3],'color',this.totarBer.color)
			}
			
			
		},
		methods: {
			tabClick(i,urls, id) {
				console.log(11111111)
				this.i=i
				// if(i==0){
					uni.switchTab({
						url: urls
					});
				// }else{
				// 	uni.reLaunch({
				// 		url: urls
				// 	});
				// }
				
            
			}
		}
	}
</script>

<style scoped>
	.tarbar {
		width: 100%;
		height: 96rpx;
		display: flex;
		justify-content: space-around;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		z-index: 100;
		font-size: 26rpx;
		color: #999999;
	}

	.tarbar view {
		text-align: center;
	}
</style>