fix(shop): 修正左右分栏高度适配问题
- 左侧分类栏 ScrollView 高度由 h-screen 修改为 h-full - 右侧排序栏及商品列表容器高度由 h-screen 修改为 h-full - 商品列表 ScrollView 添加 min-h-0 用于改善滚动高度限制
This commit is contained in:
@@ -204,7 +204,7 @@ const ShopPage: React.FC = () => {
|
|||||||
{/* 左右分栏 */}
|
{/* 左右分栏 */}
|
||||||
<View className='flex flex-1 min-h-0'>
|
<View className='flex flex-1 min-h-0'>
|
||||||
{/* 左侧分类栏 */}
|
{/* 左侧分类栏 */}
|
||||||
<ScrollView scrollY className='w-20 bg-gray-100 h-screen flex-shrink-0'>
|
<ScrollView scrollY className='w-20 bg-gray-100 h-full flex-shrink-0'>
|
||||||
{categoryList.map(cat => (
|
{categoryList.map(cat => (
|
||||||
<View
|
<View
|
||||||
key={cat.categoryId || cat.id}
|
key={cat.categoryId || cat.id}
|
||||||
@@ -221,7 +221,7 @@ const ShopPage: React.FC = () => {
|
|||||||
</ScrollView>
|
</ScrollView>
|
||||||
|
|
||||||
{/* 右侧:排序栏 + 商品列表 */}
|
{/* 右侧:排序栏 + 商品列表 */}
|
||||||
<View className='flex-1 flex flex-col h-screen min-w-0'>
|
<View className='flex-1 flex flex-col h-full min-w-0'>
|
||||||
{/* 排序栏 */}
|
{/* 排序栏 */}
|
||||||
<View className='flex items-center bg-white py-2 border-b border-gray-100 flex-shrink-0'>
|
<View className='flex items-center bg-white py-2 border-b border-gray-100 flex-shrink-0'>
|
||||||
{SORT_TABS.map(tab => (
|
{SORT_TABS.map(tab => (
|
||||||
@@ -252,7 +252,7 @@ const ShopPage: React.FC = () => {
|
|||||||
{/* 商品列表 */}
|
{/* 商品列表 */}
|
||||||
<ScrollView
|
<ScrollView
|
||||||
scrollY
|
scrollY
|
||||||
className='flex-1'
|
className='flex-1 min-h-0'
|
||||||
onScrollToLower={handleLoadMore}
|
onScrollToLower={handleLoadMore}
|
||||||
lowerThreshold={100}
|
lowerThreshold={100}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user