uniProject/components/custom-tabbar/index.vue

<!-- custom-tab-bar/index.vue -->
<template>
  <view class="ezy-custom-tabbar" v-if="show">
    <view class="tabbar-item-box" v-for="(item, index) in list" :key="index" @click="switchTab(item, index)">
      <view class="tabbar-item" :style="{ backgroundImage: 'url(' + (selectedIndex == index ? item.selectedIconPath : item.iconPath) + ')' }">
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      show: {
        type: Boolean,
        default: true
      },
      currentIndex: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        selectedIndex: 0, // 改个名字避免混淆
        list: [{
            pagePath: '/pages/chanpinXuanze/index',
            text: "版本0",
            iconPath: 'static/images/tabbar/unselect/xuanke-sj.png',
            selectedIconPath: 'static/images/tabbar/select/xuanke-sj.png'
          },
          {
            pagePath: '/pages/chanpinneirong/index',
            text: "学习1",
            iconPath: 'static/images/tabbar/unselect/xuexi-sj.png',
            selectedIconPath: 'static/images/tabbar/select/xuexi-sj.png'
          },
          {
            pagePath: '/pages/game/index',
            text: "游戏2",
            iconPath: 'static/images/tabbar/unselect/faxian-sj.png',
            selectedIconPath: 'static/images/tabbar/select/faxian-sj.png'
          },
          {
            pagePath: '/pages/chanpinMy/my',
            text: "我的3",
            iconPath: 'static/images/tabbar/unselect/wode-sj.png',
            selectedIconPath: 'static/images/tabbar/select/wode-sj.png'
          }
        ]
      };
    },
    watch: {
      currentIndex: {
        handler(newVal) {
          console.log('接收到父组件传递的currentIndex:', newVal);
          this.selectedIndex = newVal;
        },
        immediate: true
      }
    },
    methods: {
      switchTab(item, index) {
        console.log('点击Tab，index:', index, '当前选中的selectedIndex:', this.selectedIndex);
        
        // 如果点击的是当前已选中的Tab，不执行跳转
        if (this.selectedIndex === index) {
          console.log('点击的是当前已选中的Tab，不跳转');
          return;
        }

        console.log('执行跳转到:', item.pagePath);
        // 注意：这里不要更新 selectedIndex，因为跳转后目标页面会传递新的currentIndex
        uni.switchTab({
          url: item.pagePath
        });
      }
    },
    // 可以添加mounted生命周期，打印初始状态
    mounted() {
      console.log('TabBar组件mounted，初始currentIndex:', this.currentIndex);
    }
  };
</script>

<style scoped>
  /* 样式保持不变 */
  .custom-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    background: #FFFFFF;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1rpx solid #F0F0F0;
    z-index: 999;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .tab-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .tab-icon {
    width: 44rpx;
    height: 44rpx;
    margin-bottom: 6rpx;
  }

  .tab-text {
    font-size: 20rpx;
    color: #7A7E83;
  }

  .tab-text.active {
    color: #007AFF;
  }
</style>