refactor: 自定义tabbar

pages.config.ts

@@ -27,16 +27,15 @@ export default defineUniPages({
     spacing: '3px',
     list: [
       {
-        iconPath: 'static/tabbar/home.png',
-        selectedIconPath: 'static/tabbar/homeHL.png',
         pagePath: 'pages/index/index',
+        icon: 'home',
         text: '首页',
       },
       {
-        iconPath: 'static/tabbar/example.png',
-        selectedIconPath: 'static/tabbar/exampleHL.png',
-        pagePath: 'pages/index/about',
-        text: '关于',
+        pagePath: 'pages/my/index',
+        icon: 'i-carbon-user-avatar',
+        isUnocssIcon: true,
+        text: '我的',
       },
     ],
   },

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
+  },
+})

src/pages/my/index.vue

@@ -0,0 +1,20 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationBarTitleText: '我的',
+  },
+}
+</route>
+
+<template>
+  <view class="">my</view>
+</template>
+
+<script lang="ts" setup>
+//
+</script>
+
+<style lang="scss" scoped>
+//
+</style>

src/store/tabbar.ts

@@ -1,42 +0,0 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-
-export const useTabbarStore = defineStore(
-  'tabbar',
-  () => {
-    interface tabBarItem {
-      iconPath: string
-      selectedIconPath: string
-      pagePath: string
-      text: string
-    }
-    const tabBarList = ref<tabBarItem[]>([
-      {
-        iconPath: '/static/tabbar/home.png',
-        selectedIconPath: '/static/tabbar/homeHL.png',
-        pagePath: '/pages/index/index',
-        text: '首页',
-      },
-      {
-        iconPath: '/static/tabbar/example.png',
-        selectedIconPath: '/static/tabbar/exampleHL.png',
-        pagePath: '/pages/index/about',
-        text: '关于',
-      },
-    ])
-    const tabIndex = ref(0)
-
-    const setTabIndex = (val: number) => {
-      tabIndex.value = val
-    }
-
-    return {
-      tabBarList,
-      tabIndex,
-      setTabIndex,
-    }
-  },
-  {
-    persist: true,
-  },
-)

src/utils/index.ts

@@ -1,4 +1,3 @@
-// @ts-expect-error import json file
 import { pages, subPackages, tabBar } from '@/pages.json'
 
 /** 判断当前页面是否是tabbar页  */