uview 2.x版本 tabbar在uniapp小程序里头点击两次才能选中图标_uni-app h5会出现点击tabbar,页面切换但是图标没有切换完成的问题,需要二次点击才

最近将uview2.x应用到基于uniapp开发的小程序里头，作者发现，确实好用。但是很快就发现了，使用了其中的tabbar组件，出现如题的问题。

出问题的代码如下：

<template>
	<view>
		<u-tabbar
			:value="value6"
			@change="changeTab"
			activeColor="#00cc33"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
		>
			<u-tabbar-item text="首页" :icon="value6==0?'home-fill':'home'" ></u-tabbar-item>
			<u-tabbar-item text="我的" :icon="value6==1?'account-fill':'account'" ></u-tabbar-item>
		</u-tabbar>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				value6:0,
				list: [
					{path: "/pages/index/index"},
					{path: "/pages/user/user"},
				]
			}
		},
		methods: {
			changeTab(e) {
				uni.switchTab({
					url: this.list[e].path,
					success:()=>{
						this.value6 = e
					}
				})
			}
		}
	}
</script>

效果如下：

问题：点击我的，页面成功切换到了我的，但是图标没被选中（第一次会选中我的，然后闪变会首页，只是图标闪变，页面保持）。

找了一圈，没找到答案，但是我分析了下，可能是uni.switchTab导致当前的组件发生某种不可描述的问题吧。所以我注释掉uni.switchTab的代码，确实恢复正常了。

有了上面的结论，我觉得只要定义一个全局的变量来记录当前的图标位置，脱离当前组件的控制，问题应该就解决了，所以我在vuex里头定义了一个变量tabIndex，每次切换修改这个变量。果然，就成功的解决了如题的问题，修改后的代码如下：

<template>
	<view>
		<u-tabbar
			:value="tabIndex"
			@change="changeTab"
			activeColor="#00cc33"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
		>
			<u-tabbar-item text="首页" :icon="tabIndex==0?'home-fill':'home'" ></u-tabbar-item>
			<u-tabbar-item text="我的" :icon="tabIndex==1?'account-fill':'account'" ></u-tabbar-item>
		</u-tabbar>
	</view>
</template>
 
<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				interval:null,
				list: [
					{path: "/pages/index/index"},
					{path: "/pages/user/user"},
				]
			}
		},
		computed: mapState({
			tabIndex:'tabIndex'
		}),
		methods: {
			changeTab(e) {
				uni.switchTab({
					url: this.list[e].path,
					success:()=>{
						this.setTabIndex(e)
s					}
				})
			},
			setTabIndex(tabIndex){
				this.$store.state.tabIndex = tabIndex
			}
		}
	}
</script>
 
<style>
 
</style>