fix: 主导航tab增加毛玻璃

pages.config.ts

@@ -30,27 +30,31 @@ export default defineUniPages({
    *
    * 温馨提示：本文件的任何代码更改了之后，都需要重新运行，否则 pages.json 还是旧的，导致不是预期效果。
    */
-  tabBar: {
-    color: '#999999',
-    selectedColor: '#e61b28',
-    backgroundColor: '#ffffff',
-    borderStyle: '#c1c1c1',
-    height: '50px',
-    fontSize: '10px',
-    iconWidth: '24px',
-    spacing: '3px',
-    list: [{
-      iconPath: 'static/tabbar/home.png',
-      selectedIconPath: 'static/tabbar/homeHL.png',
-      pagePath: 'pages/index/index',
-    }, {
-      iconPath: 'static/tabbar/income.png',
-      selectedIconPath: 'static/tabbar/incomeHL.png',
-      pagePath: 'pages/income/income',
-    }, {
-      iconPath: 'static/tabbar/mine.png',
-      selectedIconPath: 'static/tabbar/mineHL.png',
-      pagePath: 'pages/mine/mine',
-    }],
-  },
+  // tabBar: {
+  //   color: '#999999',
+  //   selectedColor: '#e61b28',
+  //   backgroundColor: '#ffffff',
+  //   borderStyle: '#c1c1c1',
+  //   height: '50px',
+  //   fontSize: '10px',
+  //   iconWidth: '24px',
+  //   spacing: '3px',
+  //   list: [
+  //     {
+  //       iconPath: 'static/tabbar/home.png',
+  //       selectedIconPath: 'static/tabbar/homeHL.png',
+  //       pagePath: 'pages/index/index',
+  //     },
+  //     {
+  //       iconPath: 'static/tabbar/income.png',
+  //       selectedIconPath: 'static/tabbar/incomeHL.png',
+  //       pagePath: 'pages/income/income',
+  //     },
+  //     {
+  //       iconPath: 'static/tabbar/mine.png',
+  //       selectedIconPath: 'static/tabbar/mineHL.png',
+  //       pagePath: 'pages/mine/mine',
+  //     },
+  //   ],
+  // },
 })

src/layouts/fg-tabbar/fg-tabbar.vue

@@ -30,21 +30,12 @@ onLoad(() => {
 
 <template>
   <wd-tabbar
-    v-if="CUSTOM_TABBAR_ENABLE" v-model="tabbarStore.curIdx" bordered safeareainsetbottom placeholder fixed
+    v-if="CUSTOM_TABBAR_ENABLE"
+    v-model="tabbarStore.curIdx" custom-class="bg-white/60! backdrop-blur-20" bordered safeareainsetbottom placeholder fixed
     @change="selectTabBar"
   >
     <block v-for="(item, idx) in tabbarList" :key="item.path">
-      <wd-tabbar-item v-if="item.iconType === 'uiLib'" :title="item.text" :icon="item.icon" />
-      <wd-tabbar-item v-else-if="item.iconType === 'unocss' || item.iconType === 'iconfont'" :title="item.text">
-        <template #icon>
-          <view h-40rpx w-40rpx :class="[item.icon, idx === tabbarStore.curIdx ? 'is-active' : 'is-inactive']" />
-        </template>
-      </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>
+      <wd-tabbar-item :icon="idx === tabbarStore.curIdx ? item.selectedIconPath : item.iconPath" />
     </block>
   </wd-tabbar>
 </template>

src/layouts/fg-tabbar/tabbarList.ts

@@ -9,10 +9,10 @@
 
 // TODO：是否开启自定义tabbar，默认不开启
 // 不开启表示使用原生tabbar，开启表示使用自定义tabbar
-export const CUSTOM_TABBAR_ENABLE = false
+export const CUSTOM_TABBAR_ENABLE = true
 // TODO: 是否开启自定义tabbar的无缓存模式，默认不开启
 // 开启表示使用自定义tabbar的无缓存模式，并且需要把 `pages.config.ts` 里面的 tabBar 配置删除
-export const CUSTOM_TABBAR_NO_CACHE = false
+export const CUSTOM_TABBAR_NO_CACHE = true
 
 /**
  * 根据您选择的UI框架，配置相应的字段信息
@@ -21,27 +21,24 @@ export const CUSTOM_TABBAR_NO_CACHE = false
  */
 export const tabbarList = [
   {
+    iconPath: '/static/tabbar/home.png',
+    selectedIconPath: '/static/tabbar/homeHL.png',
     pagePath: 'pages/index/index',
-    icon: 'home',
-    // 选用 UI  框架自带的 icon时，iconType 为 uiLib
     iconType: 'uiLib',
+    text: 'home',
   },
   {
+    iconPath: '/static/tabbar/income.png',
+    selectedIconPath: '/static/tabbar/incomeHL.png',
     pagePath: 'pages/income/income',
-    icon: 'i-carbon-code',
-    // 注意 unocss 的图标需要在 页面上引入一下，或者配置到 unocss.config.ts 的 safelist 中
-    iconType: 'unocss',
+    iconType: 'uiLib',
+    text: 'income',
+  },
+  {
+    iconPath: '/static/tabbar/mine.png',
+    selectedIconPath: '/static/tabbar/mineHL.png',
+    pagePath: 'pages/mine/mine',
+    iconType: 'uiLib',
+    text: 'mine',
   },
-  // {
-  //   pagePath: 'pages/my/index',
-  //   text: '我的',
-  //   icon: '/static/logo.svg',
-  //   iconType: 'local',
-  // },
-  // {
-  //   pagePath: 'pages/mine/index',
-  //   text: '我的',
-  //   icon: 'iconfont icon-my',
-  //   iconType: 'iconfont',
-  // },
 ]

src/pages.json

@@ -17,33 +17,6 @@
       "^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)": "z-paging/components/z-paging$1/z-paging$1.vue"
     }
   },
-  "tabBar": {
-    "color": "#999999",
-    "selectedColor": "#e61b28",
-    "backgroundColor": "#ffffff",
-    "borderStyle": "#c1c1c1",
-    "height": "50px",
-    "fontSize": "10px",
-    "iconWidth": "24px",
-    "spacing": "3px",
-    "list": [
-      {
-        "iconPath": "static/tabbar/home.png",
-        "selectedIconPath": "static/tabbar/homeHL.png",
-        "pagePath": "pages/index/index"
-      },
-      {
-        "iconPath": "static/tabbar/income.png",
-        "selectedIconPath": "static/tabbar/incomeHL.png",
-        "pagePath": "pages/income/income"
-      },
-      {
-        "iconPath": "static/tabbar/mine.png",
-        "selectedIconPath": "static/tabbar/mineHL.png",
-        "pagePath": "pages/mine/mine"
-      }
-    ]
-  },
   "pages": [
     {
       "path": "pages/index/index",
@@ -72,7 +45,7 @@
     {
       "path": "pages/income/income",
       "type": "page",
-      "layout": "default",
+      "layout": "tabbar",
       "needLogin": true,
       "style": {
         "navigationBarTitleText": "%income.title%",
@@ -108,7 +81,7 @@
     {
       "path": "pages/mine/mine",
       "type": "page",
-      "layout": "default",
+      "layout": "tabbar",
       "needLogin": true,
       "style": {
         "navigationStyle": "custom"

src/pages/income/income.vue

@@ -1,6 +1,6 @@
 <route lang="json5">
   {
-    layout: 'default',
+    layout: 'tabbar',
     needLogin: true,
     style: {
       navigationBarTitleText: '%income.title%',

src/pages/mine/mine.vue

@@ -1,6 +1,6 @@
 <route lang="json5">
   {
-    layout: 'default',
+    layout: 'tabbar',
     needLogin: true,
     style: {
       navigationStyle: 'custom',