From d2f7b5e1ecdaf083e2b18f65b98cdbdab3882050 Mon Sep 17 00:00:00 2001
From: feige996 <1020102647@qq.com>
Date: Sat, 21 Jun 2025 14:13:30 +0800
Subject: [PATCH] =?UTF-8?q?docs(layouts):=20=E6=B7=BB=E5=8A=A0tabbar?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=BD=BF=E7=94=A8=E8=AF=B4=E6=98=8E=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/fg-tabbar/fg-tabbar.vue | 31 +++++++++++++++--------------
 src/layouts/fg-tabbar/tabbar.md     | 16 +++++++++++++++
 src/layouts/fg-tabbar/tabbarList.ts | 28 ++++++++++++++------------
 src/layouts/tabbar.vue              |  2 +-
 4 files changed, 48 insertions(+), 29 deletions(-)
 create mode 100644 src/layouts/fg-tabbar/tabbar.md

diff --git a/src/layouts/fg-tabbar/fg-tabbar.vue b/src/layouts/fg-tabbar/fg-tabbar.vue
index 757ded0..42fcb03 100644
--- a/src/layouts/fg-tabbar/fg-tabbar.vue
+++ b/src/layouts/fg-tabbar/fg-tabbar.vue
@@ -1,6 +1,6 @@
 <template>
   <wd-tabbar
-    v-if="CUSTOM_TABBAR_ENABLE"
+    v-if="customTabbarEnable"
     fixed
     v-model="tabbarStore.curIdx"
     bordered
@@ -33,34 +33,35 @@
       </wd-tabbar-item>
     </block>
   </wd-tabbar>
-  <view v-else></view>
 </template>
 
 <script setup lang="ts">
-import { tabbarList as _tabBarList, CUSTOM_TABBAR_ENABLE } from './tabbarList'
+import { tabbarList as _tabBarList, cacheTabbarEnable, selectedTabbarStrategy } from './tabbarList'
 import { tabbarStore } from './tabbar'
 
+const customTabbarEnable = selectedTabbarStrategy === 1 || selectedTabbarStrategy === 2
 /** tabbarList 里面的 path 从 pages.config.ts 得到 */
 const tabbarList = _tabBarList.map((item) => ({ ...item, path: `/${item.pagePath}` }))
 function selectTabBar({ value: index }: { value: number }) {
   const url = tabbarList[index].path
   tabbarStore.setCurIdx(index)
-  if (CUSTOM_TABBAR_ENABLE) {
-    uni.navigateTo({ url })
-  } else {
+  if (cacheTabbarEnable) {
     uni.switchTab({ url })
+  } else {
+    uni.navigateTo({ url })
   }
 }
 onLoad(() => {
   // 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
-  // !CUSTOM_TABBAR_ENABLE &&
-  //   uni.hideTabBar({
-  //     fail(err) {
-  //       console.log('hideTabBar fail: ', err)
-  //     },
-  //     success(res) {
-  //       console.log('hideTabBar success: ', res)
-  //     },
-  //   })
+  const hideRedundantTabbarEnable = selectedTabbarStrategy === 1
+  hideRedundantTabbarEnable &&
+    uni.hideTabBar({
+      fail(err) {
+        console.log('hideTabBar fail: ', err)
+      },
+      success(res) {
+        console.log('hideTabBar success: ', res)
+      },
+    })
 })
 </script>
diff --git a/src/layouts/fg-tabbar/tabbar.md b/src/layouts/fg-tabbar/tabbar.md
new file mode 100644
index 0000000..f350aeb
--- /dev/null
+++ b/src/layouts/fg-tabbar/tabbar.md
@@ -0,0 +1,16 @@
+# tabbar 说明
+
+tabbar 分为4种情况：
+
+- 完全原生tabbar，使用 switchTab 切换 tabbar，tabbar页面有缓存。
+  - 优势：原生自带的tabbar，最先渲染，有缓存。
+  - 劣势：只能使用2组图片来切换选中和非选中状态，修改颜色只能重新换图片（或者用iconfont）。
+- 半自定义tabbar，使用 switchTab 切换 tabbar，tabbar页面有缓存。使用了第三方UI库的 tabbar 组件，并隐藏了原生 tabbar 的显示。
+  - 优势：可以随意配置自己想要的 svg icon，切换字体颜色方便。有缓存。可以实现各种花里胡哨的动效等。
+  - 劣势：首次点击tababr会闪烁。
+- 全自定义tabbar，使用 navigateTo 切换tabbar，tabbar页面无缓存。使用了第三方UI库的 tabbar 组件。
+  - 优势：可以随意配置自己想要的 svg icon，切换字体颜色方便。可以实现各种花里胡哨的动效等。
+  - 劣势：首次点击tababr会闪烁，无缓存。
+- 无tabbar，只有一个页面入口，底部无tabbar显示；常用语临时活动页。
+
+> 注意：花里胡哨的效果需要自己实现，本模版不提供。
diff --git a/src/layouts/fg-tabbar/tabbarList.ts b/src/layouts/fg-tabbar/tabbarList.ts
index 7fb7113..a36f904 100644
--- a/src/layouts/fg-tabbar/tabbarList.ts
+++ b/src/layouts/fg-tabbar/tabbarList.ts
@@ -1,8 +1,17 @@
 // 是否使用自定义的tabbar?
-export const CUSTOM_TABBAR_ENABLE = false
+export const TABBAR_STRATEGY = {
+  0: 'NATIVE_TABBAR',
+  1: 'HALF_CUSTOM_TABBAR',
+  2: 'FULL_CUSTOM_TABBAR',
+  3: 'NO_TABBAR',
+}
 
-// CUSTOM_TABBAR_ENABLE 为 true 时，可以不填 iconPath 和 selectedIconPath
-// CUSTOM_TABBAR_ENABLE 为 false 时，可以不填 icon 和 iconType
+// TODO：通过这里切换使用tabbar的策略
+export const selectedTabbarStrategy = 0
+export const cacheTabbarEnable = selectedTabbarStrategy < 2
+
+// selectedTabbarStrategy==0 时，需要填 iconPath 和 selectedIconPath
+// selectedTabbarStrategy==1 or 2 时，需要填 icon 和 iconType
 export const tabbarList = [
   {
     iconPath: 'static/tabbar/home.png',
@@ -34,12 +43,6 @@ export const tabbarList = [
   // },
 ]
 
-// midButton 仅App和H5支持
-const midButton = {
-  iconPath: '/static/logo.svg',
-  text: '发布',
-}
-
 const _tabbar = {
   color: '#999999',
   selectedColor: '#018d71',
@@ -49,9 +52,8 @@ const _tabbar = {
   fontSize: '10px',
   iconWidth: '24px',
   spacing: '3px',
-  list: tabbarList as any,
-  // midButton 仅App和H5支持，（h5中测试也没生效）
-  // midButton: midButton,
+  list: tabbarList,
 }
 
-export const tabBar = CUSTOM_TABBAR_ENABLE ? undefined : _tabbar
+// 0和1 需要显示底部的tabbar的各种配置，以利用缓存
+export const tabBar = cacheTabbarEnable ? _tabbar : undefined
diff --git a/src/layouts/tabbar.vue b/src/layouts/tabbar.vue
index 3331975..9ccc2a4 100644
--- a/src/layouts/tabbar.vue
+++ b/src/layouts/tabbar.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts" setup>
-import FgTabbar from './fg-tabbar.vue'
+import FgTabbar from './fg-tabbar/fg-tabbar.vue'
 import type { ConfigProviderThemeVars } from 'wot-design-uni'
 
 const themeVars: ConfigProviderThemeVars = {