feat: 自定义 tabbar 组件替代原生 tabbar，支持 CSS 控制图标大小

Made-with: Cursor

src/components/tab-bar/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <view class="tab-bar">
+    <view
+      v-for="(item, idx) in tabs"
+      :key="item.pagePath"
+      class="tab-bar__item"
+      @tap="onSwitch(idx)"
+    >
+      <view class="tab-bar__icon">
+        <image
+          class="tab-bar__icon-img"
+          :src="current === idx ? item.activeIcon : item.icon"
+          mode="aspectFit"
+        />
+      </view>
+      <text
+        class="tab-bar__label"
+        :class="{ 'tab-bar__label--active': current === idx }"
+      >
+        {{ item.text }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import Taro from '@tarojs/taro'
+
+import homeIcon from '@/assets/tabbar/home.png'
+import homeActiveIcon from '@/assets/tabbar/home-active.png'
+import menuIcon from '@/assets/tabbar/menu.png'
+import menuActiveIcon from '@/assets/tabbar/menu-active.png'
+import ordersIcon from '@/assets/tabbar/orders.png'
+import ordersActiveIcon from '@/assets/tabbar/orders-active.png'
+import profileIcon from '@/assets/tabbar/profile.png'
+import profileActiveIcon from '@/assets/tabbar/profile-active.png'
+
+defineProps<{ current: number }>()
+
+const tabs = [
+  { pagePath: '/pages/home/index', text: '首页', icon: homeIcon, activeIcon: homeActiveIcon },
+  { pagePath: '/pages/menu/index', text: '点餐', icon: menuIcon, activeIcon: menuActiveIcon },
+  { pagePath: '/pages/orders/index', text: '订单', icon: ordersIcon, activeIcon: ordersActiveIcon },
+  { pagePath: '/pages/profile/index', text: '我的', icon: profileIcon, activeIcon: profileActiveIcon }
+]
+
+function onSwitch(idx: number) {
+  Taro.switchTab({ url: tabs[idx].pagePath })
+}
+</script>
+
+<style lang="scss">
+.tab-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100px;
+  padding-bottom: env(safe-area-inset-bottom);
+  background-color: #fff;
+  border-top: 1rpx solid #e5e7eb;
+  z-index: 999;
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    padding: 8px 0;
+  }
+
+  &__icon {
+    width: 44px;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  &__icon-img {
+    width: 44px;
+    height: 44px;
+  }
+
+  &__label {
+    font-size: 20px;
+    color: #64748b;
+    margin-top: 2px;
+    line-height: 1.2;
+
+    &--active {
+      color: #16a34a;
+    }
+  }
+}
+</style>