Browse Source

feat(index):优化首页头部和畅销商品组件布局

- 调整畅销商品组件粘性布局的样式和动画效果
-修复头部组件在吸顶状态下的高度和内边距计算
- 优化搜索框在不同状态下的显示逻辑- 统一组件间的间距和过渡动画处理
dev
科技小王子 4 days ago
parent
commit
03021a3930
  1. 7
      src/pages/index/BestSellers.tsx
  2. 14
      src/pages/index/Header.tsx

7
src/pages/index/BestSellers.tsx

@ -70,7 +70,7 @@ const BestSellers = (props: {onStickyChange?: (isSticky: boolean) => void}) => {
return (
<>
<View className={'py-3'}>
<View className={'py-3'} style={{paddingTop: '0'}}>
{/* Tabs粘性布局组件 */}
<Sticky
threshold={getSystemInfo()}
@ -79,7 +79,8 @@ const BestSellers = (props: {onStickyChange?: (isSticky: boolean) => void}) => {
zIndex: 999,
backgroundColor: stickyStatus ? '#ffffff' : 'transparent',
boxShadow: stickyStatus ? '0 2px 8px rgba(0,0,0,0.1)' : 'none',
transition: 'all 0.3s ease'
transition: 'all 0.3s ease',
marginTop: stickyStatus ? '0' : '-12px'
}}
>
<Tabs
@ -90,7 +91,7 @@ const BestSellers = (props: {onStickyChange?: (isSticky: boolean) => void}) => {
}}
style={{
backgroundColor: 'transparent',
paddingTop: stickyStatus ? '8px' : '0',
paddingTop: stickyStatus ? '0' : '8px',
paddingBottom: stickyStatus ? '8px' : '0',
}}
activeType="smile"

14
src/pages/index/Header.tsx

@ -173,14 +173,18 @@ const Header = (props: any) => {
return (
<>
<View className={'fixed top-0 header-bg'} style={{
height: !props.stickyStatus ? '180px' : 'auto',
paddingBottom: '12px'
height: !props.stickyStatus ? '180px' : `${(statusBarHeight || 0) + 44}px`,
paddingBottom: !props.stickyStatus ? '12px' : '0px'
}}>
<MySearch statusBarHeight={statusBarHeight} />
{/*{!props.stickyStatus && <MySearch done={reload}/>}*/}
{/* 只在非吸顶状态下显示搜索框 */}
{!props.stickyStatus && <MySearch statusBarHeight={statusBarHeight} />}
</View>
<NavBar
style={{marginTop: `${statusBarHeight}px`, marginBottom: '0px', backgroundColor: 'transparent'}}
style={{
marginTop: `${statusBarHeight}px`,
marginBottom: '0px',
backgroundColor: 'transparent'
}}
onBackClick={() => {
}}
left={

Loading…
Cancel
Save