Sfoglia il codice sorgente

refactor(tabbar): 重构tabbar配置逻辑并优化变量命名

将cacheTabbarEnable重命名为tabbarCacheEnable以提高可读性
新增customTabbarEnable和nativeTabbarNeedHide变量以明确功能
简化index.vue中的条件判断逻辑
feige996 9 mesi fa
parent
commit
6725b1649c
2 ha cambiato i file con 12 aggiunte e 10 eliminazioni
  1. 9 2
      src/tabbar/config.ts
  2. 3 8
      src/tabbar/index.vue

+ 9 - 2
src/tabbar/config.ts

@@ -63,9 +63,16 @@ export const tabbarList: FgTabBarItem[] = [
 ]
 
 // NATIVE_TABBAR(1) 和 CUSTOM_TABBAR_WITH_CACHE(2) 时,需要tabbar缓存
-export const cacheTabbarEnable = selectedTabbarStrategy === TABBAR_MAP.NATIVE_TABBAR
+export const tabbarCacheEnable = selectedTabbarStrategy === TABBAR_MAP.NATIVE_TABBAR
   || selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE
 
+// CUSTOM_TABBAR_WITH_CACHE(2) 和 CUSTOM_TABBAR_WITHOUT_CACHE(3) 时,启用自定义tabbar
+export const customTabbarEnable = selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE
+  || selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITHOUT_CACHE
+
+// CUSTOM_TABBAR_WITH_CACHE(2)时,需要隐藏原生tabbar
+export const nativeTabbarNeedHide = selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE
+
 const _tabbar: TabBar = {
   // 只有微信小程序支持 custom。App 和 H5 不生效
   custom: selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE,
@@ -81,4 +88,4 @@ const _tabbar: TabBar = {
 }
 
 // 0和1 需要显示底部的tabbar的各种配置,以利用缓存
-export const tabBar = cacheTabbarEnable ? _tabbar : undefined
+export const tabBar = tabbarCacheEnable ? _tabbar : undefined

+ 3 - 8
src/tabbar/index.vue

@@ -1,18 +1,14 @@
 <script setup lang="ts">
 // 'i-carbon-code',
-import { tabbarList as _tabBarList, cacheTabbarEnable, selectedTabbarStrategy, TABBAR_MAP } from './config'
+import { tabbarList as _tabBarList, customTabbarEnable, nativeTabbarNeedHide, tabbarCacheEnable } from './config'
 import { tabbarStore } from './store'
 
-const customTabbarEnable
-= selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE
-  || selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITHOUT_CACHE
-
 /** 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 (cacheTabbarEnable) {
+  if (tabbarCacheEnable) {
     uni.switchTab({ url })
   }
   else {
@@ -21,8 +17,7 @@ function selectTabBar({ value: index }: { value: number }) {
 }
 onLoad(() => {
   // 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
-  const hideRedundantTabbarEnable = selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE
-  hideRedundantTabbarEnable
+  nativeTabbarNeedHide
   && uni.hideTabBar({
     fail(err) {
       console.log('hideTabBar fail: ', err)