feat(index):优化首页头部和畅销商品组件布局
- 调整畅销商品组件粘性布局的样式和动画效果 -修复头部组件在吸顶状态下的高度和内边距计算 - 优化搜索框在不同状态下的显示逻辑- 统一组件间的间距和过渡动画处理
This commit is contained in:
@@ -70,7 +70,7 @@ const BestSellers = (props: {onStickyChange?: (isSticky: boolean) => void}) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<View className={'py-3'}>
|
<View className={'py-3'} style={{paddingTop: '0'}}>
|
||||||
{/* Tabs粘性布局组件 */}
|
{/* Tabs粘性布局组件 */}
|
||||||
<Sticky
|
<Sticky
|
||||||
threshold={getSystemInfo()}
|
threshold={getSystemInfo()}
|
||||||
@@ -79,7 +79,8 @@ const BestSellers = (props: {onStickyChange?: (isSticky: boolean) => void}) => {
|
|||||||
zIndex: 999,
|
zIndex: 999,
|
||||||
backgroundColor: stickyStatus ? '#ffffff' : 'transparent',
|
backgroundColor: stickyStatus ? '#ffffff' : 'transparent',
|
||||||
boxShadow: stickyStatus ? '0 2px 8px rgba(0,0,0,0.1)' : 'none',
|
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
|
<Tabs
|
||||||
@@ -90,7 +91,7 @@ const BestSellers = (props: {onStickyChange?: (isSticky: boolean) => void}) => {
|
|||||||
}}
|
}}
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
paddingTop: stickyStatus ? '8px' : '0',
|
paddingTop: stickyStatus ? '0' : '8px',
|
||||||
paddingBottom: stickyStatus ? '8px' : '0',
|
paddingBottom: stickyStatus ? '8px' : '0',
|
||||||
}}
|
}}
|
||||||
activeType="smile"
|
activeType="smile"
|
||||||
|
|||||||
@@ -173,14 +173,18 @@ const Header = (props: any) => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<View className={'fixed top-0 header-bg'} style={{
|
<View className={'fixed top-0 header-bg'} style={{
|
||||||
height: !props.stickyStatus ? '180px' : 'auto',
|
height: !props.stickyStatus ? '180px' : `${(statusBarHeight || 0) + 44}px`,
|
||||||
paddingBottom: '12px'
|
paddingBottom: !props.stickyStatus ? '12px' : '0px'
|
||||||
}}>
|
}}>
|
||||||
<MySearch statusBarHeight={statusBarHeight} />
|
{/* 只在非吸顶状态下显示搜索框 */}
|
||||||
{/*{!props.stickyStatus && <MySearch done={reload}/>}*/}
|
{!props.stickyStatus && <MySearch statusBarHeight={statusBarHeight} />}
|
||||||
</View>
|
</View>
|
||||||
<NavBar
|
<NavBar
|
||||||
style={{marginTop: `${statusBarHeight}px`, marginBottom: '0px', backgroundColor: 'transparent'}}
|
style={{
|
||||||
|
marginTop: `${statusBarHeight}px`,
|
||||||
|
marginBottom: '0px',
|
||||||
|
backgroundColor: 'transparent'
|
||||||
|
}}
|
||||||
onBackClick={() => {
|
onBackClick={() => {
|
||||||
}}
|
}}
|
||||||
left={
|
left={
|
||||||
|
|||||||
Reference in New Issue
Block a user