解决Uni-app自定义底部tabber，切换tabbar时，点击两次tabbar才会显示正确，但页面可以正常切换的问题

图为底部tabbar

问题说明：点击tabbar时，例如点击【日程】，第一次点击时页面成功切换，但选中的样式（图中样式在【我的】）并未切换到【日程】，第二次点击时样式成功切换。注：我使用的vue3.

代码及对应点击tabbar方法：

<view class="tab-item" v-for="(item, index) in tabs" :key="index" @click="switchTab(index)"
			:class="{ 'active': currentTab === index }">
			<!-- 图标和文本根据实际需要进行替换 -->
			<!-- <text class="tab-icon">{
   
   { item.icon }}</text> -->
			<text class="tab-text" :class="{ 'active': currentTab === index }">{
   
   { item.text }}</text>
		</view>

switchTab(index) {
				const tab = this.tabs[index]
				this.currentTab = index
				if (tab) {
					uni.switchTab({
						url: tab.pagePath
					})
				}
			},

问题原因：uni.switchTab的不明原因，注释掉这个方法tabbar可以正常切换。

解决方法：参考使用vuex的方法，将原本放在组件data中的currentTab存入vuex，在切换tabbar时调用vuex中的tabIndex，确认方法可行。

步骤一：在vuex中设置tabIndex（store/index.js）

import { createStore } from 'vuex'
const store = createStore({
	state:{//存放状态
		"tabIndex":0
	}
})

export default store

步骤二：在组件中调用state（这里如果在js文件中使用this.$store.state.属性名，则不需要import引入store）

引入

import store from '@/store/index.js'; //需要引入store

新增方法

setTabIndex(tabIndex) {
				console.log(store.state.tabIndex)
				store.state.tabIndex = tabIndex
			}

在uni.switchTab中，跳转页面成功时调用

switchTab(index) {
				const tab = this.tabs[index]
				store.state.tabIndex = index
				this.currentTab = index
				if (tab) {
					uni.switchTab({
						url: tab.pagePath,
						success: () => {
							this.setTabIndex(index)
						}
					})
				}
			},

步骤三：删除原本data中的currentTab，使用计算属性将tabIndex给到currentTab

computed: {
			currentTab() {
				return store.state.tabIndex
			}
		},

此时html无需改变：

扫描二维码关注公众号，回复： 17509139 查看本文章

<view class="tab-item" v-for="(item, index) in tabs" :key="index" @click="switchTab(index)"
			:class="{ 'active': currentTab === index }">
			<!-- 图标和文本根据实际需要进行替换 -->
			<!-- <text class="tab-icon">{
   
   { item.icon }}</text> -->
			<text class="tab-text" :class="{ 'active': currentTab === index }">{
   
   { item.text }}</text>
		</view>

参考文章：uview 2.x版本 tabbar在uniapp小程序里头点击两次才能选中图标_uni-app h5会出现点击tabbar,页面切换但是图标没有切换完成的问题,需要二次点击才-CSDN博客https://blog.csdn.net/wltsysterm/article/details/126069020