状态栏修复更新

1.添加状态栏间距来防止内容遮挡
2.添加了跟随页面自动变色的状态栏标题色改变
This commit is contained in:
2026-08-04 17:41:24 +08:00
parent bf8ce482e4
commit d0b37d6aa3
54 changed files with 2650 additions and 2503 deletions
+3 -1
View File
@@ -1,3 +1,5 @@
export default definePageConfig({
navigationStyle: 'custom'
navigationStyle: 'custom',
// 顶部为深色商品大图,状态栏文字设为白色,确保 iOS 时间/电量可见
navigationBarTextStyle: 'white'
})
+9 -1
View File
@@ -4,14 +4,21 @@ import { useState, useEffect, useCallback, useMemo } from 'react'
import './index.scss'
import { PRODUCTS } from '../../../utils/productConfig'
import { ProductCategory } from '../../../types'
import { useSafeArea } from '../../../hooks/useSafeArea'
import { useStatusBar } from '../../../hooks/useStatusBar'
import { useThemeContext } from '../../../context/ThemeContext'
const clamp = (v: number, min: number, max: number) => Math.min(Math.max(v, min), max)
const lerp = (a: number, b: number, t: number) => a + (b - a) * t
const easeOut = (t: number) => 1 - Math.pow(1 - t, 3)
export default function ShopDetailPage() {
const { resolvedTheme } = useThemeContext()
const [winHeight, setWinHeight] = useState(667)
const [progress, setProgress] = useState(0)
const safe = useSafeArea()
// 顶部为沉浸式商品图,状态栏始终使用白字。
useStatusBar(resolvedTheme, { mode: 'light' })
const routerParams = Taro.getCurrentInstance().router?.params
const productId = routerParams?.id || ''
@@ -174,6 +181,7 @@ export default function ShopDetailPage() {
<View
className="shop-band"
style={{
top: `${safe.statusBarHeight}px`,
opacity: heroStyles.bandOpacity,
backgroundColor: `rgba(${tone[0]}, ${tone[1]}, ${tone[2]}, 0.88)`,
backdropFilter: 'blur(12px)',
@@ -251,7 +259,7 @@ export default function ShopDetailPage() {
<View
className="shop-back-btn"
onTap={() => Taro.navigateBack()}
style={{ opacity: heroStyles.backBtnOpacity }}
style={{ top: `${safe.backBtnPaddingTop}px`, opacity: heroStyles.backBtnOpacity }}
>
<Text className="shop-back-arrow"></Text>
</View>