Browse Source

修复底部提示'货源正在快马加鞭的赶来'被遮挡的问题

1. 移除scroll-view强制高度限制,改为自适应高度
2. 简化底部提示显示条件,只要有商品数据就显示
3. 修复网格容器固定高度问题,改为自适应
4. 增加底部安全区域,确保提示不被遮挡
pull/3/head
徐飞洋 2 months ago
parent
commit
8360d1e946
  1. 5
      pages/index/index.wxml
  2. 20
      pages/index/index.wxss

5
pages/index/index.wxml

@ -136,7 +136,7 @@
> >
<view class="goods-list-container"> <view class="goods-list-container">
<!-- 网格布局 --> <!-- 网格布局 -->
<view class="grid-container" style="width: 725rpx; height: 1845rpx; display: flex; box-sizing: border-box"> <view class="grid-container" style="width: 725rpx; min-height: auto; height: auto; display: flex; box-sizing: border-box">
<view <view
class="grid-item" class="grid-item"
wx:for="{{filteredGoods}}" wx:for="{{filteredGoods}}"
@ -204,10 +204,11 @@
</view> </view>
<!-- 无更多数据 --> <!-- 无更多数据 -->
<view wx:if="{{!hasMoreData && filteredGoods.length > 0}}" class="no-more-data"> <view wx:if="{{filteredGoods.length > 0}}" class="no-more-data">
<text>货源正在快马加鞭的赶来</text> <text>货源正在快马加鞭的赶来</text>
</view> </view>
<!-- 无商品时显示 --> <!-- 无商品时显示 -->
<view wx:if="{{filteredGoods.length === 0 && !isLoading}}" class="empty-goods"> <view wx:if="{{filteredGoods.length === 0 && !isLoading}}" class="empty-goods">
<view class="empty-icon">📦</view> <view class="empty-icon">📦</view>

20
pages/index/index.wxss

@ -103,8 +103,9 @@ page {
.goods-list { .goods-list {
flex: 1; flex: 1;
padding-top: 240rpx; padding-top: 240rpx;
height: 100%; padding-bottom: 20rpx;
min-height: 100vh; height: auto;
min-height: auto;
box-sizing: border-box; box-sizing: border-box;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -141,18 +142,15 @@ page {
/* 确保滚动视图有正确的容器高度 */ /* 确保滚动视图有正确的容器高度 */
.goods-section { .goods-section {
flex: 1;
display: flex;
flex-direction: column;
height: auto; height: auto;
min-height: calc(100vh - 60rpx); min-height: auto;
position: relative; position: relative;
background: #f5f5f5; background: #f5f5f5;
padding-bottom: calc(env(safe-area-inset-bottom) ); padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
} overflow: hidden;
.goods-list {
height: auto;
box-sizing: border-box;
background: #f5f5f5;
padding-bottom: calc(env(safe-area-inset-bottom) );
} }
/* 标题样式 */ /* 标题样式 */

Loading…
Cancel
Save