Преглед на файлове

feat: 三种方式的图标,tabbar都支持

菲鸽 преди 2 години
родител
ревизия
695486e41f
променени са 2 файла, в които са добавени 24 реда и са изтрити 7 реда
  1. 10 4
      pages.config.ts
  2. 14 3
      src/components/fg-tabbar/fg-tabbar.vue

+ 10 - 4
pages.config.ts

@@ -28,15 +28,21 @@ export default defineUniPages({
     list: [
       {
         pagePath: 'pages/index/index',
-        icon: 'home',
         text: '首页',
+        icon: 'home',
+        iconType: 'wot',
+      },
+      {
+        pagePath: 'pages/index/about',
+        text: '关于',
+        icon: 'i-carbon-3d-mpr-toggle',
+        iconType: 'unocss',
       },
       {
         pagePath: 'pages/my/index',
-        icon: 'user',
-        // 经过验证发现unocss这样跨文件动态图标,无法显示,所以先用wot icon 吧
-        // isUnocssIcon: true,
         text: '我的',
+        icon: '/static/logo.svg',
+        iconType: 'local',
       },
     ],
   },

+ 14 - 3
src/components/fg-tabbar/fg-tabbar.vue

@@ -8,7 +8,12 @@
     @change="selectTabBar"
   >
     <block v-for="(item, idx) in tabbarList" :key="item.path">
-      <!-- <wd-tabbar-item v-if="item.isUnocssIcon" :title="item.text">
+      <wd-tabbar-item
+        v-if="item.iconType === 'wot'"
+        :title="item.text"
+        :icon="item.icon"
+      ></wd-tabbar-item>
+      <wd-tabbar-item v-else-if="item.iconType === 'unocss'" :title="item.text">
         <template #icon>
           <view
             h-40rpx
@@ -16,13 +21,19 @@
             :class="[item.icon, idx === tabbarStore.curIdx ? 'is-active' : 'is-inactive']"
           ></view>
         </template>
-      </wd-tabbar-item> -->
-      <wd-tabbar-item :title="item.text" :icon="item.icon"></wd-tabbar-item>
+      </wd-tabbar-item>
+      <wd-tabbar-item v-else-if="item.iconType === 'local'" :title="item.text">
+        <template #icon>
+          <image :src="item.icon" h-40rpx w-40rpx />
+        </template>
+      </wd-tabbar-item>
     </block>
   </wd-tabbar>
 </template>
 
 <script setup lang="ts">
+// 只需要把外面的icon在这里写一遍就能生效了!注释掉也是生效的,但是必须要有!
+// i-carbon-3d-mpr-toggle
 import { tabBar } from '@/pages.json'
 import { tabbarStore } from './tabbar'