XW-AIOT/aiot-uniapp
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
将cacheTabbarEnable重命名为tabbarCacheEnable以提高可读性
新增customTabbarEnable和nativeTabbarNeedHide变量以明确功能
简化index.vue中的条件判断逻辑
This commit is contained in:
feige996
2025-08-04 10:53:16 +08:00
parent e3495bae69
commit 6725b1649c
2 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/tabbar/config.ts
View File

@@ -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

11
src/tabbar/index.vue
View File

@@ -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)