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:
zhangjing1
2026-03-23 11:35:06 +08:00
parent ef7face227
commit d21b710af6
3 changed files with 10 additions and 11 deletions

View File

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

View File

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

View File

@@ -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'