uniapp 如何解决自定义tabbar切换时页面闪烁

自定义 TabBar 切换时页面闪烁是因为页面重新渲染导致的，解决办法有很多种，这里介绍一种比较简单的做法。

1. 在 App.vue 中创建一个全局变量，用于记录当前选中的 Tab：

export default {
  globalData: {
    currentTab: 0,
  },
}

2. 在 TabBar 组件中，绑定当前选中的 Tab：

<!-- TabBar.vue -->
<template>
  <view class="tab-bar">
    <view class="tab-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)"></view>
    <view class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)"></view>
    <view class="tab-item" :class="{ active: currentTab === 2 }" @click="switchTab(2)"></view>
  </view>
</template>

<script>
export default {
  props: {
    // 从父组件传入当前选中的 Tab
    currentTab: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    // 切换 Tab
    switchTab(index) {
      this.$emit('switchTab', index);
    },
  },
};
</script>

3. 在 TabBar 所在的页面中，监听 Tab 切换事件，并手动切换页面：

<template>
  <view>
    <view v-if="currentTab === 0">Tab 1</view>
    <view v-if="currentTab === 1">Tab 2</view>
    <view v-if="currentTab === 2">Tab 3</view>
    <TabBar :currentTab="currentTab" @switchTab="onSwitchTab" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
    };
  },
  methods: {
    // 监听 Tab 切换事件
    onSwitchTab(index) {
      // 如果切换到当前页面，则不进行操作
      if (index === this.currentTab) {
        return;
      }
      // 记录当前选中的 Tab
      this.currentTab = index;
      // 手动切换页面
      uni.switchTab({
        url: `/pages/tab${index + 1}/index`,
      });
    },
  },
};
</script>

这样，在 Tab 切换时，页面不会重新渲染，也就不会出现闪烁的问题。需要注意的是，手动切换页面时，需要使用 `uni.switchTab` 方法，而不是 `uni.navigateTo` 或 `uni.redirectTo` 方法。