xusfood_client/components/tabbar.vue

<template>
	<view class="tabbar">
		<u-tabbar
			:value="tabbarValue"
			@change="tabbarChange"
			:fixed="true"
			:placeholder="true"
			:border="false"
			inactiveColor="#666"
			activeColor="#00A447"
			:safeAreaInsetBottom="true"
		>
			<u-tabbar-item text="商城" >
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					:src="staticUrl+'/img/tabbar-mall.png'"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					:src="staticUrl+'/img/tabbar-mall-gray.png'"
				></image>
			</u-tabbar-item>
			<u-tabbar-item text="分类" >
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					:src="staticUrl+'/img/tabbar-classify.png'"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					:src="staticUrl+'/img/tabbar-classify-gray.png'"
				></image>
			</u-tabbar-item>
			<u-tabbar-item text="关于旭烁" >
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					:src="staticUrl+'/img/tabbar-xushuo-v2.png'"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					:src="staticUrl+'/img/tabbar-xushuo-v2-gray.png'"
				></image>
			</u-tabbar-item>
		<!-- 	<u-tabbar-item text="购物车" >
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="/static/img/tabbar-car.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="/static/img/tabbar-car-gray.png"
				></image>
			</u-tabbar-item> -->
			<u-tabbar-item text="我的" >
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					:src="staticUrl+'/img/tabbar-my.png'"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					:src="staticUrl+'/img/tabbar-my-gray.png'"
				></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
export default {
	name: 'tabbar',
	props:{
		tabbarIndexProps:{
			type:Number,
			default:0
		},
	},
	data() {
		return {
			staticUrl:this.$commonConfig.staticUrl,
			tabbarValue:0,
		}
	},
	watch:{
		'tabbarIndexProps': {
			handler(newVal, oldVal) {
				// let pages = getCurrentPages();
				// console.log('pages============',pages);
				this.tabbarValue = newVal
			},
			immediate: true
		}
	},
	onLoad() {
		console.log('onLoad tabbarIndex',this.tabbarIndex);
	},
	onShow() {
		console.log('tabbarIndex',this.tabbarIndex);
		this.tabbarValue = this.tabbarIndex
	},
	methods: {
		tabbarChange(name){
			console.log('name====',name);
			const tabBarRoutes = {
			0: '/pages/index/index',
			1: {
			  url: '/shopping/producTypetList',
			  query: {
				navType: 'navigateTo'
			  }
			},
			2: '/xushuo/xushuo',
			// 3: '/shopping/cart',
			3: '/center/center'
		  };
		  
		  const targetRoute = tabBarRoutes[name];
		  
		  if (typeof targetRoute === 'string') {
			uni.reLaunch({url: targetRoute});
		  } else if (typeof targetRoute === 'object') {
			  if(targetRoute.query.navType=='navigateTo'){
				  this.$u.route(targetRoute.url, targetRoute.query);
				  return
			  }
			let queryParams = uni.$u.queryParams(targetRoute.query);
			uni.reLaunch({url: targetRoute.url+queryParams});
		  }
			// this.tabbarValue = name
		}
	}
}	
</script>

<style lang="scss" scoped>
.u-page__item__slot-icon{
	width: 40rpx;
	height: 40rpx;
	&.big{
		transform: scale(1.5) translateY(-0.5em);
	}
}
.u-tabbar-item{
	padding-top: 10rpx;
}
.tabbar{
	/deep/ .u-tabbar{
		.u-tabbar-item{
			padding-top: 100px;
		}
	}
}

</style>