Explorar el Código

refactor(tabbar): 调整tabbar策略编号和逻辑

更新tabbar策略编号定义和相关的条件判断逻辑,使编号更符合实际功能顺序
同步修改文档说明和缓存判断条件
feige996 hace 10 meses
padre
commit
2eef641636

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

@@ -4,7 +4,7 @@ import { tabbarStore } from './tabbar'
 import { tabbarList as _tabBarList, cacheTabbarEnable, selectedTabbarStrategy } from './tabbarList'
 
 // @ts-expect-error 预知的判断
-const customTabbarEnable = selectedTabbarStrategy === 1 || selectedTabbarStrategy === 2
+const customTabbarEnable = selectedTabbarStrategy === 2 || selectedTabbarStrategy === 3
 /** tabbarList 里面的 path 从 pages.config.ts 得到 */
 const tabbarList = _tabBarList.map(item => ({ ...item, path: `/${item.pagePath}` }))
 function selectTabBar({ value: index }: { value: number }) {
@@ -20,7 +20,7 @@ function selectTabBar({ value: index }: { value: number }) {
 onLoad(() => {
   // 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
   // @ts-expect-error 预知的判断
-  const hideRedundantTabbarEnable = selectedTabbarStrategy === 1
+  const hideRedundantTabbarEnable = selectedTabbarStrategy === 2
   hideRedundantTabbarEnable
   && uni.hideTabBar({
     fail(err) {

+ 5 - 4
src/layouts/fg-tabbar/tabbar.md

@@ -2,15 +2,16 @@
 
 `tabbar` 分为 `4 种` 情况:
 
-- 0 `完全原生 tabbar`,使用 `switchTab` 切换 tabbar,`tabbar` 页面有缓存。
+- 0 `无 tabbar`,只有一个页面入口,底部无 `tabbar` 显示;常用语临时活动页。
+- 1 `原生 tabbar`,使用 `switchTab` 切换 tabbar,`tabbar` 页面有缓存。
   - 优势:原生自带的 tabbar,最先渲染,有缓存。
   - 劣势:只能使用 2 组图片来切换选中和非选中状态,修改颜色只能重新换图片(或者用 iconfont)。
-- 1 `半自定义 tabbar`,使用 `switchTab` 切换 tabbar,`tabbar` 页面有缓存。使用了第三方 UI 库的 `tabbar` 组件,并隐藏了原生 `tabbar` 的显示。
+- 2 `有缓存自定义 tabbar`,使用 `switchTab` 切换 tabbar,`tabbar` 页面有缓存。使用了第三方 UI 库的 `tabbar` 组件,并隐藏了原生 `tabbar` 的显示。
   - 优势:可以随意配置自己想要的 `svg icon`,切换字体颜色方便。有缓存。可以实现各种花里胡哨的动效等。
   - 劣势:首次点击 tababr 会闪烁。
-- 2 `全自定义 tabbar`,使用 `navigateTo` 切换 `tabbar`,`tabbar` 页面无缓存。使用了第三方 UI 库的 `tabbar` 组件。
+- 3 `无缓存自定义 tabbar`,使用 `navigateTo` 切换 `tabbar`,`tabbar` 页面无缓存。使用了第三方 UI 库的 `tabbar` 组件。
   - 优势:可以随意配置自己想要的 svg icon,切换字体颜色方便。可以实现各种花里胡哨的动效等。
   - 劣势:首次点击 `tababr` 会闪烁,无缓存。
-- 3 `无 tabbar`,只有一个页面入口,底部无 `tabbar` 显示;常用语临时活动页。
+
 
 > 注意:花里胡哨的效果需要自己实现,本模版不提供。

+ 10 - 10
src/layouts/fg-tabbar/tabbarList.ts

@@ -1,19 +1,19 @@
 /**
  * tabbar 选择的策略,更详细的介绍见 tabbar.md 文件
- * 0: 'NATIVE_TABBAR'  `完全原生 tabbar`
- * 2: 'FULL_CUSTOM_TABBAR' `全自定义 tabbar`
- * 1: 'HALF_CUSTOM_TABBAR' `半自定义 tabbar`
- * 3: 'NO_TABBAR' `无 tabbar`
+ * 0: 'NO_TABBAR' `无 tabbar`
+ * 1: 'NATIVE_TABBAR'  `完全原生 tabbar`
+ * 2: 'CUSTOM_TABBAR_WITH_CACHE' `有缓存自定义 tabbar`
+ * 3: 'CUSTOM_TABBAR_NO_CACHE' `无缓存自定义 tabbar`
  *
  * 温馨提示:本文件的任何代码更改了之后,都需要重新运行,否则 pages.json 不会更新导致错误
  */
 
 // TODO:通过这里切换使用tabbar的策略
-export const selectedTabbarStrategy = 0
+export const selectedTabbarStrategy = 1
 
-// selectedTabbarStrategy==0 时,需要填 iconPath 和 selectedIconPath
-// selectedTabbarStrategy==1 or 2 时,需要填 icon 和 iconType
-// selectedTabbarStrategy==3 时,tabbarList 不生效
+// selectedTabbarStrategy==1 时,需要填 iconPath 和 selectedIconPath
+// selectedTabbarStrategy==2 or 3 时,需要填 icon 和 iconType
+// selectedTabbarStrategy==0 时,tabbarList 不生效
 export const tabbarList = [
   {
     iconPath: 'static/tabbar/home.png',
@@ -46,8 +46,8 @@ export const tabbarList = [
   // },
 ]
 
-// 0 和 1 时,需要tabbar缓存
-export const cacheTabbarEnable = selectedTabbarStrategy < 2
+// 1 和 2 时,需要tabbar缓存
+export const cacheTabbarEnable = selectedTabbarStrategy === 1 || selectedTabbarStrategy === 2
 
 const _tabbar = {
   color: '#999999',