ソースを参照

feat: 使用 tabbar layout + wot icon

菲鸽 2 年 前
コミット
4f6d271c28
4 ファイル変更9 行追加4 行削除
  1. 3 2
      pages.config.ts
  2. 4 0
      src/layouts/tabbar.vue
  3. 1 1
      src/pages/index/index.vue
  4. 1 1
      src/pages/my/index.vue

+ 3 - 2
pages.config.ts

@@ -33,8 +33,9 @@ export default defineUniPages({
       },
       {
         pagePath: 'pages/my/index',
-        icon: 'i-carbon-user-avatar',
-        isUnocssIcon: true,
+        icon: 'user',
+        // 经过验证发现unocss这样跨文件动态图标,无法显示,所以先用wot icon 吧
+        // isUnocssIcon: true,
         text: '我的',
       },
     ],

+ 4 - 0
src/layouts/tabbar.vue

@@ -0,0 +1,4 @@
+<template>
+  <slot />
+  <fg-tabbar />
+</template>

+ 1 - 1
src/pages/index/index.vue

@@ -1,6 +1,7 @@
 <!-- 使用 type="home" 属性设置首页,其他页面不需要设置,默认为page;推荐使用json5,更强大,且允许注释 -->
 <route lang="json5" type="home">
 {
+  layout: 'tabbar',
   style: {
     navigationStyle: 'custom',
     navigationBarTitleText: '首页',
@@ -28,7 +29,6 @@
       <text class="text-green-500">tabbar</text>
     </view>
   </view>
-  <fg-tabbar />
 </template>
 
 <script lang="ts" setup>

+ 1 - 1
src/pages/my/index.vue

@@ -1,6 +1,6 @@
 <route lang="json5" type="page">
 {
-  layout: 'default',
+  layout: 'tabbar',
   style: {
     navigationBarTitleText: '我的',
   },