Vue uni-app 底部 Tabbar 组件动态修改状态慢一步问题解决

<template>
  <div class='tabbar'>
    <div class='tabbar-item' @click='goHome'>
      <image :src='currentTab == 'home' ? '/static/images/home-a.png' : '/static/images/home.png''></image>
      <span>首页</span>
    </div>
    <div class='tabbar-item' @click='goMy'>
      <image :src='currentTab == 'my' ? '/static/images/my-a.png' : '/static/images/my.png''></image>
      <span>我的</span>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref, defineProps } from 'vue';
const props = defineProps({
  currentTab: {
    type: String,
    default: 'home'
  }
});
const currentTab = ref(props.currentTab)
const goHome = () => {
  currentTab.value = 'home';
  uni.switchTab({ url: '/pages/index/index' });
}
const goMy = () => {
  currentTab.value = 'my';
  uni.switchTab({ url: '/pages/my/my' });
}
</script>
<style scoped lang='scss'>
.tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 98rpx;
  background-color: #fff;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
}
.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 22rpx;
  color: #999;
}
.tabbar-item image {
  margin-bottom: 9rpx;
  width: 44rpx;
  height: 44rpx;
}
.tabbar-item.active {
  color: #007aff;
}
</style>
<p>这是一个使用 Vue 和 uni-app 框架实现的底部 tabbar 组件。组件包含两个选项卡：首页和我的，通过点击不同选项卡可以跳转到对应页面。</p>
<p>在组件中使用了 ref 和 defineProps 函数，分别用来创建响应式数据和定义 props 属性。通过定义的 props 属性，可以在调用组件时传入对应的参数，从而实现组件的动态渲染。</p>
<p>在跳转页面时，使用了 uni.switchTab 函数，该函数可以实现底部选项卡的切换，并跳转到对应的页面。但是由于 uni-app 中的页面跳转是异步操作，因此在组件中动态修改选项卡状态时会存在慢一步的情况。</p>
<p>为了解决这个问题，可以在跳转页面前修改选项卡状态，这样可以避免组件状态和页面跳转状态的不同步。同时，也可以使用 uni-app 提供的事件监听函数来监听页面跳转完成的事件，从而及时更新组件状态。</p>