security_study_hx/components/tabbar.vue

<template>
	<view class="tabbar">
		<u-tabbar
			:value="tabbarValue"
			@change="tabbarChange"
			:fixed="true"
			:placeholder="true"
			:border="false"
			inactiveColor="#999"
			activeColor="#009AEF"
			:customStyle="{'padding-top':'5px'}"
			:safeAreaInsetBottom="true"
		>
			<u-tabbar-item text="首页" >
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="../static/img/tabbar-home.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="../static/img/tabbar-home-gray.png"
				></image>
			</u-tabbar-item>
			<!-- <u-tabbar-item text="奖品兑换" >
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="../static/img/tabbar-gift.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="../static/img/tabbar-gift-gray.png"
				></image>
			</u-tabbar-item> -->
			<u-tabbar-item text="个人中心" >
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="../static/img/tabbar-my.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="../static/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: '/shopping/order',
			1: '/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);
	}
}
</style>