refactor(tabbar): 添加中间鼓包tabbarItem功能并修复路径切换逻辑
重构tabbar配置逻辑,将鼓包功能开关和路径处理移至store模块 修复tabbar路径切换时的索引判断逻辑错误
This commit is contained in:
@@ -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) {
|
||||
|
||||
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user