refactor(tabbar): 添加中间鼓包tabbarItem功能并修复路径切换逻辑

重构tabbar配置逻辑,将鼓包功能开关和路径处理移至store模块
修复tabbar路径切换时的索引判断逻辑错误
This commit is contained in:
feige996
2025-08-18 17:09:44 +08:00
parent ec633132df
commit 0f77ce9480
2 changed files with 22 additions and 18 deletions

View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
// 'i-carbon-code',
import { tabbarList as _tabbarList, customTabbarEnable, needHideNativeTabbar, tabbarCacheEnable } from './config'
import { tabbarStore } from './store'
import { customTabbarEnable, needHideNativeTabbar, tabbarCacheEnable } from './config'
import { tabbarList, tabbarStore } from './store'
// #ifdef MP-WEIXIN
// 将自定义节点设置成虚拟的去掉自定义组件包裹层更加接近Vue组件的表现能更好的使用flex属性
@@ -10,8 +10,6 @@ defineOptions({
})
// #endif
// TODO 1/2: 中间的鼓包tabbarItem的开关
const BULGE_ENABLE = false
/**
* 中间的鼓包tabbarItem的点击事件
*/
@@ -22,16 +20,6 @@ function handleClickBulge() {
})
}
/** tabbarList 里面的 path 从 pages.config.ts 得到 */
const tabbarList = _tabbarList.map(item => ({ ...item, path: `/${item.pagePath}` }))
if (BULGE_ENABLE) {
if (tabbarList.length % 2 === 1) {
console.error('tabbar 数量必须是偶数,否则样式很奇怪!!')
}
tabbarList.splice(tabbarList.length / 2, 0, {
isBulge: true,
} as any)
}
function handleClick(index: number) {
// 点击原来的不做操作
if (index === tabbarStore.curIdx) {

View File

@@ -1,4 +1,20 @@
import { tabbarList } from './config'
import { tabbarList as _tabbarList } from './config'
// TODO 1/2: 中间的鼓包tabbarItem的开关
const BULGE_ENABLE = true
/** tabbarList 里面的 path 从 pages.config.ts 得到 */
const tabbarList = _tabbarList.map(item => ({ ...item, path: `/${item.pagePath}` }))
if (BULGE_ENABLE) {
if (tabbarList.length % 2 === 1) {
console.error('tabbar 数量必须是偶数,否则样式很奇怪!!')
}
tabbarList.splice(tabbarList.length / 2, 0, {
isBulge: true,
} as any)
}
export { tabbarList }
/**
* 自定义 tabbar 的状态管理,原生 tabbar 无需关注本文件
@@ -16,11 +32,11 @@ export const tabbarStore = reactive({
const index = tabbarList.findIndex(item => item.pagePath === path)
// console.log('index:', index, path)
// console.log('tabbarList:', tabbarList)
if (index !== -1) {
this.setCurIdx(index)
if (index === -1) {
this.setCurIdx(0)
}
else {
this.setCurIdx(0)
this.setCurIdx(index)
}
},
restorePrevIdx() {