From d41dfb4c5a6c4634ee6099f1900979e9a084f887 Mon Sep 17 00:00:00 2001 From: DU Date: Wed, 18 Mar 2026 14:09:10 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9tabbar=20=E6=B8=B2=E6=9F=93?= =?UTF-8?q?=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.config.ts | 2 ++ src/custom-tab-bar/index.scss | 42 +++++++++++++++++++---------------- src/custom-tab-bar/index.tsx | 42 +++++++++++++++++------------------ 3 files changed, 46 insertions(+), 40 deletions(-) diff --git a/src/app.config.ts b/src/app.config.ts index f82a178..0c54a6e 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -86,6 +86,8 @@ export default defineAppConfig({ navigationBarBackgroundColor: '#fff', navigationBarTitleText: '台球馆', navigationBarTextStyle: 'black', + backgroundColor: '#121212', + backgroundColorBottom: '#121212', }, // 自定义 TabBar tabBar: { diff --git a/src/custom-tab-bar/index.scss b/src/custom-tab-bar/index.scss index 576506e..4887fa1 100644 --- a/src/custom-tab-bar/index.scss +++ b/src/custom-tab-bar/index.scss @@ -5,6 +5,13 @@ * 其他图标: 40px × 37px * 文本字号: 20px */ +:host { + display: block; + width: 100%; + height: calc(129px + env(safe-area-inset-bottom)); + background-color: #0E0D0D; +} + .custom-tab-bar { position: fixed; bottom: 0; @@ -18,27 +25,24 @@ // 背景层 .tab-bar-bg { position: absolute; - top: 40px; + top: 25px; // 留出顶部空间给凸起 bottom: 0; left: 0; right: 0; - height: 129px; background: #0E0D0D; - box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05); z-index: 1; pointer-events: auto; } - // 中间凸起的圆形背景（如需要可以启用） + // 中间凸起的圆形黑底 .tab-bar-center-bg { position: absolute; - // bottom: 29px; /* scan按钮底部位置 */ + top: -54px; // 向上凸出 left: 50%; transform: translateX(-50%); - width: 130px; - height: 130px; - background: blue; - // background: #0E0D0D; + width: 146px; // 比扫码按钮大一圈，形成黑色包裹边框 + height: 146px; + background: #0E0D0D; border-radius: 50%; z-index: 2; pointer-events: auto; @@ -108,23 +112,24 @@ .scan-wrapper { position: absolute; - bottom: -10px; /* 让130px高的scan按钮凸出30px: 129px - (130px - 30px) = 29px */ + top: 40px; /* 使用 top 定位，使其相对于 tabbar 顶部固定，不随底部安全区变化 */ left: 50%; transform: translateX(-50%); z-index: 10; + .scan-button { - width: 130px; - height: 130px; + width: 120px; + height: 120px; border-radius: 50%; - background-color: #0E0D0D; + background-color: transparent; // 移除黑色背景，露出图标本身的颜色 display: flex; align-items: center; justify-content: center; .scan-icon { - width: 110px; - height: 110px; + width: 120px; // 让图标撑满按钮 + height: 120px; } } } @@ -137,12 +142,11 @@ .custom-tab-bar { height: calc(129px + env(safe-area-inset-bottom)); - .tab-bar-bg { - height: calc(129px + env(safe-area-inset-bottom)); - } - .tab-bar-content { height: calc(129px + env(safe-area-inset-bottom)); } + + // 注意：.tab-bar-bg 使用了 top 和 bottom 定位，会自动拉伸，不需要重写 height + // .tab-bar-center-bg 和 .scan-wrapper 相对顶部定位，保持凸起位置不变 } } diff --git a/src/custom-tab-bar/index.tsx b/src/custom-tab-bar/index.tsx index b3cea50..19cada2 100644 --- a/src/custom-tab-bar/index.tsx +++ b/src/custom-tab-bar/index.tsx @@ -2,7 +2,7 @@ * 自定义 TabBar - 中间凸起样式 * 参考：https://developer.aliyun.com/article/1228635 */ -import { CoverView, CoverImage } from '@tarojs/components' +import { View, Image } from '@tarojs/components' import Taro from '@tarojs/taro' import { observer } from 'mobx-react' import { TAB_BAR_CONFIG } from '../constants/config' @@ -40,7 +40,7 @@ const TAB_BAR_ITEMS = [ const CustomTabBar = observer(() => { const pages = Taro.getCurrentPages() const currentPage = pages[pages.length - 1] - const currentPath = '/' + currentPage.route + const currentPath = currentPage ? '/' + currentPage.route : '/pages/index/index' const handleTabClick = (path: string) => { if (path === currentPath) return @@ -55,7 +55,7 @@ const CustomTabBar = observer(() => { // 获取图标 const getIcon = (path: string, isActive: boolean) => { - const icons = TAB_ICONS[path] + const icons = TAB_ICONS[path as keyof typeof TAB_ICONS] if (!icons) return homeIcon return isActive ? icons.active : icons.normal } @@ -66,50 +66,50 @@ const CustomTabBar = observer(() => { } return ( - - {/* 背景白色层 */} - + + {/* 背景深色层 */} + {/* 中间凸起的圆形背景 */} - {/* */} + {/* TabBar 项目 */} - + {TAB_BAR_ITEMS.map((item, index) => { const isActive = currentPath === item.path const isCenter = 'isCenter' in item && item.isCenter return ( - handleTabClick(item.path)} > {isCenter ? ( // 中间扫码按钮 - 凸起样式 - - - + + - - + + ) : ( // 普通 Tab 项 - - + - {item.text} - + {item.text} + )} - + ) })} - - + + ) })