recycle-front/wxcomponents/user-tabar/user-tabar.vue

<template>
    <view class="tab-bar">
      <view 
        v-for="(item, index) in tabList" 
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === item.pagePath }"
        @tap="switchTab(item.pagePath)"
      >
        <image 
          :src="currentTab === item.pagePath ? item.selectedIconPath : item.iconPath" 
          class="tab-icon"
        ></image>
        <text>{{ item.text }}</text>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    name: 'UserTabBar',
    data() {
      return {
        currentTab: '/pages/component/home',
        tabList: [
          {
            pagePath: '/pages/component/home',
            text: '首页',
            iconPath: '/static/logo.png',
            selectedIconPath: '/static/logo.png'
          },
          {
            pagePath: '/pages/component/recycle',
            text: '回收',
            iconPath: '/static/logo.png',
            selectedIconPath: '/static/logo.png'
          },
          {
            pagePath: '/pages/component/my',
            text: '我的',
            iconPath: '/static/logo.png',
            selectedIconPath: '/static/logo.png'
          }
        ]
      }
    },
    methods: {
      switchTab(path) {
        if (this.currentTab === path) return
        
        // 立即更新当前选中状态
        const oldPath = this.currentTab
        this.currentTab = path
        
        // 进行路由跳转
        uni.switchTab({
          url: path,
          success: () => {
            // 跳转成功，状态已经更新
            console.log('切换成功')
          },
          fail: () => {
            // 如果switchTab失败，尝试navigateTo
            uni.navigateTo({
              url: path,
              success: () => {
                console.log('导航成功')
              },
              fail: () => {
                // 如果都失败了，恢复原来的状态
                this.currentTab = oldPath
                console.log('切换失败')
              }
            })
          }
        })
      },
      updateCurrentTab() {
        const pages = getCurrentPages()
        if (pages.length > 0) {
          const currentPage = pages[pages.length - 1]
          const newPath = '/' + currentPage.route
          // 只在路径真正改变时才更新
          if (this.currentTab !== newPath) {
            this.currentTab = newPath
          }
        }
      }
    },
    created() {
      this.updateCurrentTab()
    },
    onShow() {
      this.updateCurrentTab()
    },
    onLoad() {
      // 页面加载时更新当前tab
      this.updateCurrentTab()
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    background: #fff;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid #f5f5f5;
    z-index: 1000;
    .tab-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #999;
      gap: 4rpx;
  
      .tab-icon {
        width: 48rpx;
        height: 48rpx;
      }
  
      &.active {
        color: #00C853;
      }
    }
  }
  </style>