refactor: 自定义tabbar

src/components/fg-tabbar/fg-tabbar.vue

@@ -1,82 +1,37 @@
 <template>
-  <view class="tab-bar">
-    <view class="content">
-      <view
-        class="one-tab"
-        v-for="(item, index) in tabBarList"
-        :key="index"
-        @click="selectTabBar(index)"
-      >
-        <view>
-          <view class="tab-img">
-            <image v-if="tabIndex === index" class="img" :src="item.selectedIconPath"></image>
-            <image v-else class="img" :src="item.iconPath"></image>
-          </view>
-        </view>
-        <view v-if="tabIndex === index" class="tit select-texts">{{ item.text }}</view>
-        <view v-else class="tit texts">{{ item.text }}</view>
-      </view>
-    </view>
-  </view>
+  <wd-tabbar
+    fixed
+    v-model="tabbarStore.curIdx"
+    bordered
+    safeAreaInsetBottom
+    placeholder
+    @change="selectTabBar"
+  >
+    <block v-for="(item, idx) in tabbarList" :key="item.path">
+      <wd-tabbar-item v-if="item.isUnocssIcon" :title="item.text">
+        <template #icon>
+          <view
+            h-40rpx
+            w-40rpx
+            :class="[item.icon, idx === tabbarStore.curIdx ? 'is-active' : 'is-inactive']"
+          ></view>
+        </template>
+      </wd-tabbar-item>
+      <wd-tabbar-item v-else :title="item.text" :icon="item.icon"></wd-tabbar-item>
+    </block>
+  </wd-tabbar>
 </template>
 
 <script setup lang="ts">
-import { useTabbarStore } from '@/store/tabbar'
-import { storeToRefs } from 'pinia'
+import { tabBar } from '@/pages.json'
+import { tabbarStore } from './tabbar'
 
-const tabbar = useTabbarStore()
-const { tabBarList, tabIndex } = storeToRefs(tabbar)
-const { setTabIndex } = tabbar
+/** tabbarList 里面的 path 必须和 pages.config.ts 的页面路径一致 */
+const tabbarList = tabBar.list.map((item) => ({ ...item, path: `/${item.pagePath}` }))
 
-function selectTabBar(index: number) {
-  setTabIndex(index)
-  uni.switchTab({ url: tabBarList.value[index].pagePath })
+function selectTabBar({ value: index }: { value: number }) {
+  const url = tabbarList[index].path
+  tabbarStore.setCurIdx(index)
+  uni.switchTab({ url })
 }
 </script>
-
-<style lang="scss">
-.tab-bar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100vw;
-  padding-top: 10rpx;
-  padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
-  padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
-  background-color: #f8f8f8;
-
-  .content {
-    display: flex;
-
-    .one-tab {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: 50%;
-
-      .tab-img {
-        width: 50rpx;
-        height: 50rpx;
-
-        .img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-
-      .tit {
-        font-size: 30rpx;
-        transform: scale(0.7);
-      }
-
-      .select-texts {
-        color: #018d71;
-      }
-
-      .texts {
-        color: block;
-      }
-    }
-  }
-}
-</style>

src/components/fg-tabbar/tabbar.ts

@@ -0,0 +1,21 @@
+export const tabbarList = [
+  {
+    path: '/pages/index/about',
+    icon: 'home',
+    isWotIcon: true,
+    title: '首页',
+  },
+  {
+    path: '/pages/index/index',
+    icon: 'i-carbon-user-avatar',
+    isWotIcon: false,
+    title: '我的',
+  },
+]
+
+export const tabbarStore = reactive({
+  curIdx: 0,
+  setCurIdx(idx: number) {
+    this.curIdx = idx
+  },
+})