From 1980595ba83be8d483020c21f56329f65f4cbbaf Mon Sep 17 00:00:00 2001
From: feige996 <1020102647@qq.com>
Date: Fri, 8 Aug 2025 09:35:36 +0800
Subject: [PATCH] =?UTF-8?q?feat(tabbar):=20=E6=B7=BB=E5=8A=A0=E4=B8=AD?=
 =?UTF-8?q?=E9=97=B4=E5=87=B8=E8=B5=B7=E6=8C=89=E9=92=AE=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=B9=B6=E6=9B=B4=E6=96=B0=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加中间凸起按钮功能，支持自定义图标和点击事件处理
更新tabbar配置，增加isBulge字段标识凸起按钮项
修改默认策略为CUSTOM_TABBAR_WITH_CACHE
添加扫描图标资源文件
---
 src/static/tabbar/scan.png | Bin 0 -> 3962 bytes
 src/tabbar/config.ts       |   8 +++---
 src/tabbar/index.vue       |  51 +++++++++++++++++++++++++++++++++++--
 3 files changed, 54 insertions(+), 5 deletions(-)
 create mode 100644 src/static/tabbar/scan.png

diff --git a/src/static/tabbar/scan.png b/src/static/tabbar/scan.png
new file mode 100644
index 0000000000000000000000000000000000000000..f0f60c217536586824f1b5f4605ddf1bc03834d1
GIT binary patch
literal 3962
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
U;;r}uuK)l507*qoM6N<$g3GkE+yDRo

literal 0
HcmV?d00001

diff --git a/src/tabbar/config.ts b/src/tabbar/config.ts
index d1cac63..d89a35f 100644
--- a/src/tabbar/config.ts
+++ b/src/tabbar/config.ts
@@ -2,12 +2,13 @@ import type { TabBar } from '@uni-helper/vite-plugin-uni-pages'
 
 type NativeTabBarItem = TabBar['list'][0]
 
-type CustomTabBarItem = Pick<NativeTabBarItem, 'text' | 'pagePath'> & {
+type CustomTabBarItem = (Pick<NativeTabBarItem, 'text' | 'pagePath'> & {
   iconType: 'uniUi' | 'uiLib' | 'unocss' | 'iconfont' | 'image' // 不建议用 image 模式，需要配置2张图
   icon: any // 其实是 string 类型，这里是为了避免 ts 报错 (tabbar/index.vue 里面 uni-icons 那行)
   activeIcon?: string // 只有在 image 模式下才需要，传递的是高亮的图片（PS： 不建议用 image 模式）
   badge?: number | 'dot' // badge 显示一个数字或 小红点（样式可以直接在 tabbar/index.vue 里面修改）
-}
+  isBulge?: boolean // 是否是中间的鼓包tabbarItem
+})
 
 /**
  * tabbar 选择的策略，更详细的介绍见 tabbar.md 文件
@@ -26,7 +27,7 @@ export const TABBAR_MAP = {
 }
 
 // TODO: 1/3. 通过这里切换使用tabbar的策略
-export const selectedTabbarStrategy = TABBAR_MAP.NATIVE_TABBAR
+export const selectedTabbarStrategy = TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE
 
 // TODO: 2/3. 更新下面的 tabbar 配置
 // 如果是使用 NO_TABBAR(0)，nativeTabbarList 和 customTabbarList 都不生效(里面的配置不用管)
@@ -73,6 +74,7 @@ export const customTabbarList: CustomTabBarItem[] = [
     icon: 'i-carbon-code',
     // badge: 10,
   },
+
   // {
   //   pagePath: 'pages/mine/index',
   //   text: '我的',
diff --git a/src/tabbar/index.vue b/src/tabbar/index.vue
index 7341453..10dd69e 100644
--- a/src/tabbar/index.vue
+++ b/src/tabbar/index.vue
@@ -10,13 +10,31 @@ defineOptions({
 })
 // #endif
 
+// TODO 1/2: 中间的鼓包tabbarItem的开关
+const BULGE_ENABLE = true
+function handleClickBulge() {
+  console.log('点击了中间的鼓包tabbarItem')
+}
+
 /** 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) {
     return
   }
+  if (tabbarList[index].isBulge) {
+    handleClickBulge()
+    return
+  }
   const url = tabbarList[index].path
   tabbarStore.setCurIdx(index)
   if (tabbarCacheEnable) {
@@ -34,7 +52,7 @@ onLoad(() => {
       console.log('hideTabBar fail: ', err)
     },
     success(res) {
-      console.log('hideTabBar success: ', res)
+      // console.log('hideTabBar success: ', res)
     },
   })
 })
@@ -63,7 +81,15 @@ function getImageByIndex(index: number, item: { iconActive?: string, icon: strin
           :style="{ color: getColorByIndex(index) }"
           @click="handleClick(index)"
         >
-          <view class="relative px-3">
+          <view v-if="item.isBulge" class="relative">
+            <!-- 中间一个鼓包tabbarItem的处理 -->
+            <view class="bulge">
+              <!-- TODO 2/2: 通常是一个图片，或者icon，点击触发业务逻辑 -->
+              <!-- 常见的是：扫描按钮、发布按钮、更多按钮等 -->
+              <image class="mt-6rpx h-200rpx w-200rpx" src="/static/tabbar/scan.png" />
+            </view>
+          </view>
+          <view v-else class="relative px-3">
             <template v-if="item.iconType === 'uniUi'">
               <uni-icons :type="item.icon" size="20" :color="getColorByIndex(index)" />
             </template>
@@ -97,6 +123,7 @@ function getImageByIndex(index: number, item: { iconActive?: string, icon: strin
           </view>
         </view>
       </view>
+
       <view class="pb-safe" />
     </view>
   </view>
@@ -112,4 +139,24 @@ function getImageByIndex(index: number, item: { iconActive?: string, icon: strin
   border-top: 1px solid #eee;
   box-sizing: border-box;
 }
+// 中间鼓包的样式
+.bulge {
+  position: absolute;
+  top: -20px;
+  left: 50%;
+  transform-origin: top center;
+  transform: translateX(-50%) scale(0.5) translateY(-33%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 250rpx;
+  height: 250rpx;
+  border-radius: 50%;
+  background-color: #fff;
+  box-shadow: inset 0 0 0 1px #fefefe;
+
+  &:active {
+    opacity: 0.8;
+  }
+}
 </style>