uni-app开发微信小程序自定义标签页跳转问题记录

问题描述：实现自定义标签页后，在跳转时，图标激活状态无法实时更新，需要点击两次后图标才会切换激活状态

自定义标签页组件:

<custom-tabbar.vue>

<template>
	<view>
		<uv-tabbar :value="value" @change="change" iconSize=30>
			<uv-tabbar-item v-for="(item,index) in list" :key="index" :text="item.text"
				:icon="item.icon"></uv-tabbar-item>
		</uv-tabbar>
	</view>

</template>
<script>
	export default {
		data() {
			return {
				value: 0,
				list: [{
						"pagePath": "/pages/index/index",
						"text": "首页",
						"icon": "home"
					},
					{
						"pagePath": "/pages/cloudF/cloudF",
						"text": "云函数",
						"icon": "list"
					},
					{
						"pagePath": "/pages/user/user",
						"text": "我的",
						"icon": "account"
					}
				]
			}
		},
		methods: {
			change(e) {
				uni.switchTab({
					url: this.list[e].pagePath,
				});
			}
		}
	}
</script>

<style>
</style>

原实现方案：在图标的点击事件中实现页面跳转和数据绑定；

<template>
	<view>
		<uv-tabbar :value="value" @change="change" iconSize=30>
			<uv-tabbar-item v-for="(item,index) in list" :key="index" :text="item.text"
				:icon="item.icon"></uv-tabbar-item>
		</uv-tabbar>
	</view>

</template>
<script>
	export default {
		data() {
			return {
				value: 0,
				list: [{
						"pagePath": "/pages/index/index",
						"text": "首页",
						"icon": "home"
					},
					{
						"pagePath": "/pages/cloudF/cloudF",
						"text": "云函数",
						"icon": "list"
					},
					{
						"pagePath": "/pages/user/user",
						"text": "我的",
						"icon": "account"
					}
				]
			}
		},
		methods: {
			this.value = e;
			change(e) {
				uni.switchTab({
					url: this.list[e].pagePath,
				});
			}
		}
	}
</script>

<style>
</style>

解决方案：在使用自定义标签页组件的页面中，在生命周期onshow时，切换图标激活。

<template>
	<view>
		<uv-icon size="60" name="home" @click="getValue"></uv-icon>
		<button @click="getValue"></button>
	</view>
	
	<!-- 底部导航栏 -->
	<custom-tabbar :value="0" ref=cusBar></custom-tabbar>
</template>
<script>
	export default {
		data() {
			return {
			}
		},
		methods:{
			getValue(){
				console.log(this.$refs.cusBar.$data.value)
			}
		},
		onShow() {
			this.$refs.cusBar.$data.value = 0
		}
	}
</script>

<style>

</style>

原因：俺也不晓得，才开始学习。