lgp-wx-plus/components/tabbar/customTabbar.vue

<template>
  <view class="tab-bar-container">
    <view class="tab-bar">
      <view
          v-for="(item, index) in list"
          :key="index"
          :class="['tab-item', { active: currentTab === item.pagePath, activity: item.pagePath === '/pages/activity/activity' }]"
          @click="switchTab(item.pagePath)"
      >
        <view class="icon-wrapper" :class="{ active: currentTab === item.pagePath }">
          <image :src="currentTab === item.pagePath ? item.selectedIconPath : item.iconPath" />
          <view class="text">{{ item.text }}</view>
        </view>
      </view>
    </view>
    <view class="tab-bar-placeholder"></view>
  </view>
</template>

<script>
export default {
  props: {
    selectedTab: {
      type: String,
      default: '/pages/home/home'
    }
  },
  data() {
    return {
      currentTab: this.selectedTab,
      list: [
        {
          text: '首页',
          pagePath: '/pages/home/home',
          iconPath: '/static/tabbar/home.png',
          selectedIconPath: '/static/tabbar/home-fill.png'
        },
        {
          text: '分类',
          pagePath: '/pages/classify/classify',
          iconPath: '/static/tabbar/classify.png',
          selectedIconPath: '/static/tabbar/classify-fill.png'
        },
        {
          text: '活动',
          pagePath: '/pages/activity/activity',
          iconPath: '/static/tabbar/activity.png',
          selectedIconPath: '/static/tabbar/activity-fill.png'
        },
        {
          text: '购物车',
          pagePath: '/pages/shoppingCart/shoppingCart',
          iconPath: '/static/tabbar/shopping-cart.png',
          selectedIconPath: '/static/tabbar/shopping-cart-fill.png'
        },
        {
          text: '我的',
          pagePath: '/pages/mine/index',
          iconPath: '/static/tabbar/mine.png',
          selectedIconPath: '/static/tabbar/mine-fill.png'
        }
      ]
    };
  },
  created() {
    this.updateCurrentTab();
  },
  mounted() {
    uni.hideTabBar();
  },
  methods: {
    switchTab(url) {
      if (this.currentTab !== url) {
        this.currentTab = url;
        uni.switchTab({ url });
      }
    },
    updateCurrentTab() {
      const currentPage = getCurrentPages().pop();
      if (currentPage && currentPage.route) {
        this.currentTab = `/${currentPage.route}`;
      }
    }
  },
  watch: {
    selectedTab(newVal) {
      this.currentTab = newVal;
    },
    '$route'() {
      this.updateCurrentTab();
    }
  },
  onShow() {
    this.updateCurrentTab();
  }
};
</script>

<style scoped>
.tab-bar-container {
  position: relative;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #ddd;
  height: 70px;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: #888;
  font-size: 12px;
  position: relative;
}

.icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}

.icon-wrapper.active {
  transform: scale(1.2);
  transition: transform 0.3s;
}

.tab-item image {
  width: 24px;
  height: 24px;
}

.tab-item .text {
  margin-top: 3px;
  color: #888;
}

.tab-item.active .text {
  color: #ff8800;
}

.activity {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  position: relative;
}

.activity .icon-wrapper {
  position: relative;
  top: -20px;
  width: 70px;
  height: 70px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.activity .icon-wrapper image {
  width: 24px;
  height: 24px;
}

.tab-bar-placeholder {
  height: 80px;
}

.activity::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 3px;
  background: #ff8800;
  z-index: -1;
}

.scale-enter-active, .scale-leave-active {
  transition: transform 0.3s;
}

.scale-enter, .scale-leave-to /* .scale-leave-active in <2.1.8 */
{
  transform: scale(1.2);
}

.scale-leave-active {
  transform: scale(0.9);
}

.slide-left-enter-active, .slide-left-leave-active {
  transition: transform 0.3s ease;
}

.slide-left-enter, .slide-left-leave-to {
  transform: translateX(-100%);
}

.slide-right-enter-active, .slide-right-leave-active {
  transition: transform 0.3s ease;
}

.slide-right-enter, .slide-right-leave-to {
  transform: translateX(100%);
}
</style>