ss_dc_wechat_mini_program/components/tabbar/index.vue

<template>
  <view class="custom-tabbar" :class="{ 'safe-area-inset-bottom': true }">
    <view 
      v-for="(item, index) in tabList" 
      :key="index" 
      class="tabbar-item" 
      :class="{ active: currentPath === item.pagePath }"
      @click="switchTab(item, index)"
    >
      <view class="icon-box">
        <Icon 
          v-if="item.iconName" 
          :name="item.iconName" 
          :size="48" 
          :color="currentPath === item.pagePath ? activeColor : inactiveColor"
        />
      </view>
      <text 
        class="text" 
        :style="{ color: currentPath === item.pagePath ? activeColor : inactiveColor }"
      >{{ item.text }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import Icon from '@/components/icon/index.vue';

// 固定的导航配置
const tabList = [
  {
    iconName: 'icon-shouye',
    text: '首页',
    pagePath: 'pages/index/index'
  },
  {
    iconName: 'icon-zuanshi',
    text: '产品',
    pagePath: 'pages/product/index'
  },
  {
    iconName: 'icon-zhifeiji',
    text: '活动',
    pagePath: 'pages/activity/index'
  },
  {
    iconName: 'icon-qizhi',
    text: '基(营)地',
    pagePath: 'pages/base/index'
  },
  {
    iconName: 'icon-renyuan',
    text: '我的',
    pagePath: 'pages/my/index'
  }
];

// 颜色配置
const activeColor = '#1d2089';
const inactiveColor = '#999';

// 当前路径
const currentPath = ref('');

// 更新当前路径
const updateCurrentPath = () => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  currentPath.value = currentPage ? currentPage.route : '';
};

// 切换页面
const switchTab = (item) => {
  if (currentPath.value === item.pagePath) return;
  
  uni.switchTab({
    url: `/${item.pagePath}`
  });
};

// 监听路由变化
uni.$on('onShow', () => {
  updateCurrentPath();
});

// 组件挂载时更新路径
onMounted(() => {
  updateCurrentPath();
});

// 组件销毁时移除监听
onUnmounted(() => {
  uni.$off('onShow');
});
</script>

<style lang="scss" scoped>
.custom-tabbar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 120rpx;
  align-items: center;
  background-color: #fff;
  display: flex;
  border-top: 1rpx solid #dcdcdc;
  z-index: 999;
  
  &.safe-area-inset-bottom {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    .icon-box {
      margin-bottom: 6rpx;
    }
    
    .text {
      font-size: 24rpx;
      line-height: 1;
    }
  }
}
</style>