迁移版本

components/tabbar/customTabbar.vue

@@ -0,0 +1,227 @@
+<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>