docs(layouts): 添加tabbar组件使用说明文档

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) {
+  if (cacheTabbarEnable) {
-    uni.navigateTo({ url })
-  } else {
     uni.switchTab({ url })
+  } else {
+    uni.navigateTo({ url })
   }
 }
 onLoad(() => {
   // 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
-  // !CUSTOM_TABBAR_ENABLE &&
+  const hideRedundantTabbarEnable = selectedTabbarStrategy === 1
-  //   uni.hideTabBar({
+  hideRedundantTabbarEnable &&
-  //     fail(err) {
+    uni.hideTabBar({
-  //       console.log('hideTabBar fail: ', err)
+      fail(err) {
-  //     },
+        console.log('hideTabBar fail: ', err)
-  //     success(res) {
+      },
-  //       console.log('hideTabBar success: ', res)
+      success(res) {
-  //     },
+        console.log('hideTabBar success: ', res)
-  //   })
+      },
+    })
 })
 </script>

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显示；常用语临时活动页。
+
+> 注意：花里胡哨的效果需要自己实现，本模版不提供。

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
+// TODO：通过这里切换使用tabbar的策略
-// CUSTOM_TABBAR_ENABLE 为 false 时，可以不填 icon 和 iconType
+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,
+  list: tabbarList,
-  // midButton 仅App和H5支持，（h5中测试也没生效）
-  // midButton: midButton,
 }
 
-export const tabBar = CUSTOM_TABBAR_ENABLE ? undefined : _tabbar
+// 0和1 需要显示底部的tabbar的各种配置，以利用缓存
+export const tabBar = cacheTabbarEnable ? _tabbar : undefined

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 = {