mirror of
https://gitee.com/ShopeX/ECShopX_mobile-frontend
synced 2026-08-06 04:36:24 +08:00
fix(ECX-8176): sticky tab nav offset and status bar sync for immersive mode
- Content partition: use full calculateNavBarHeight for sticky zone threshold; run status-bar color updates when navSticky (not only immersive); sticky top offset only when navSticky && immersive to avoid double offset on non-immersive home - Location module: align sticky top with same navSticky && immersive rule - Home: import SpSkuSelect from components barrel; drop duplicate SpPoweredBy import Made-with: Cursor
This commit is contained in:
@@ -79,7 +79,7 @@ export default function WgtContentPartition(props) {
|
||||
getElementRectBox(`#wgt-content-partition-sticky-trigger-${id}`).catch(() => null),
|
||||
getElementRectBox(`#wgt-content-partition-section-sentinel-${id}`).catch(() => null)
|
||||
])
|
||||
const navBarPx = rpxToPx(calculateNavBarHeight - navBarHeight)
|
||||
const navBarPx = rpxToPx(calculateNavBarHeight)
|
||||
const inStickyZone = triggerRect != null && triggerRect.top <= navBarPx
|
||||
const stillOverContent = sentinelRect != null && sentinelRect.top > navBarPx
|
||||
if (inStickyZone && stillOverContent) {
|
||||
@@ -92,8 +92,7 @@ export default function WgtContentPartition(props) {
|
||||
statusBarSourceId,
|
||||
base.statusBarBgColor,
|
||||
setStatusBarBgColorFromSticky,
|
||||
calculateNavBarHeight,
|
||||
navBarHeight
|
||||
calculateNavBarHeight
|
||||
])
|
||||
|
||||
const throttledScrollUpdate = useMemo(
|
||||
@@ -102,7 +101,7 @@ export default function WgtContentPartition(props) {
|
||||
)
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (immersive && base.statusBarBgColor) {
|
||||
if (base.navSticky && base.statusBarBgColor) {
|
||||
throttledScrollUpdate()
|
||||
// 仅 tab 切换时:布局变化后 nextTick 再跑一次,用新布局判断颜色,避免「切换 tab 颜色没了」
|
||||
const tabChanged = prevTabIndexRef.current !== currentIndex
|
||||
@@ -115,7 +114,7 @@ export default function WgtContentPartition(props) {
|
||||
}
|
||||
}, [
|
||||
scrollTop,
|
||||
immersive,
|
||||
base.navSticky,
|
||||
currentIndex,
|
||||
throttledScrollUpdate,
|
||||
base.statusBarBgColor,
|
||||
@@ -129,9 +128,9 @@ export default function WgtContentPartition(props) {
|
||||
return {
|
||||
...getGlobalBaseStyle(base.outerMargin),
|
||||
position: base.navSticky ? 'sticky' : 'relative',
|
||||
top: base.navSticky ? `${navBarHeight}px` : 0
|
||||
top: base.navSticky && immersive ? `${navBarHeight}px` : '0px'
|
||||
}
|
||||
}, [base.outerMargin, base.navSticky, navBarHeight])
|
||||
}, [base.outerMargin, base.navSticky, navBarHeight, immersive])
|
||||
|
||||
// 获取导航项区域样式(navitemarea)
|
||||
const navItemAreaStyle = useMemo(() => {
|
||||
|
||||
@@ -54,9 +54,9 @@ export default function WgtLocationModule(props) {
|
||||
return {
|
||||
...getGlobalBaseStyle(base.outerMargin),
|
||||
position: base.navSticky ? 'sticky' : 'relative',
|
||||
top: base.navSticky ? `${navBarHeight}px` : 0
|
||||
top: base.navSticky && immersive ? `${navBarHeight}px` : '0px'
|
||||
}
|
||||
}, [base.outerMargin, base.navSticky, navBarHeight])
|
||||
}, [base.outerMargin, base.navSticky, navBarHeight, immersive])
|
||||
|
||||
// 获取导航项区域样式(navitemarea)
|
||||
const navItemAreaStyle = useMemo(() => {
|
||||
|
||||
@@ -16,7 +16,8 @@ import {
|
||||
SpRecommend,
|
||||
SpTabbar,
|
||||
SpCouponPackage,
|
||||
SpPoweredBy
|
||||
SpPoweredBy,
|
||||
SpSkuSelect
|
||||
} from '@/components'
|
||||
import api from '@/api'
|
||||
import {
|
||||
@@ -42,7 +43,6 @@ import {
|
||||
import { useImmer } from 'use-immer'
|
||||
import { useLogin, useNavigation, useLocation, useModal, useEffectAsync } from '@/hooks'
|
||||
import doc from '@/doc'
|
||||
import SpPoweredBy from '@/components/sp-powered-by'
|
||||
import withPageWrapper from '@/hocs/withPageWrapper'
|
||||
import HomeWgts from './home/comps/home-wgts'
|
||||
import { WgtsContext } from './home/wgts/wgts-context'
|
||||
|
||||
Reference in New Issue
Block a user