great_mobileui/components/tabbar.vue

<template>
	<view class="tabbar">
		<u-tabbar
			:value="tabbarValue"
			@change="tabbarChange"
			:fixed="true"
			:placeholder="true"
			:border="false"
			inactiveColor="#666"
			activeColor="#EE0808"
			:customStyle="{'padding-top':'5px','padding-bottom':'5px','z-index':'30','margin':'0 48rpx 40rpx','border-radius':'50rpx','box-shadow':'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px'}"
			:safeAreaInsetBottom="false"
		>
			<u-tabbar-item text="购票" >
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					:src="staticUrl+'/img/tabbar-home.png'"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					:src="staticUrl+'/img/tabbar-home-gray.png'"
				></image>
			</u-tabbar-item>
			<u-tabbar-item text="订单" >
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					:src="staticUrl+'/img/tabbar-order.png'"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					:src="staticUrl+'/img/tabbar-order-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'
			//   }
			// },
			1: '/center/order',
			// 2: '/shopping/shoppingindex',
			2: '/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: 62rpx;
	height: 62rpx;
	&.big{
		transform: scale(1.5) translateY(-0.5em);
	}
}
.tabbar /deep/ .u-tabbar-item{
	height: 100rpx;
}
</style>