Browse Source

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

重构tabbar配置逻辑,将鼓包功能开关和路径处理移至store模块
修复tabbar路径切换时的索引判断逻辑错误
feige996 8 months ago
parent
commit
0f77ce9480
2 changed files with 22 additions and 18 deletions
  1. 2 14
      src/tabbar/index.vue
  2. 20 4
      src/tabbar/store.ts

+ 2 - 14
src/tabbar/index.vue

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

+ 20 - 4
src/tabbar/store.ts

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