货盘页导航栏去除,修复奇数个商品样式错误,修改触底加载
Test Runner / hello (push) Successful in 5s

This commit is contained in:
2026-08-25 11:21:21 +08:00
parent 1313f20bdf
commit 075928124c
5 changed files with 88 additions and 113 deletions
+20 -83
View File
@@ -13,7 +13,7 @@
</view>
<!-- 商品网格滚动区 -->
<scroll-view scroll-y class="product-scroll">
<scroll-view scroll-y class="product-scroll" :lower-threshold="100" :scroll-top="scrollTopVal" :scroll-with-animation="false" @scrolltolower="onScrollToLower">
<view class="product-grid" v-if="list.length > 0">
<view
class="product-card"
@@ -51,24 +51,11 @@
<text class="empty-text">没有找到相关商品</text>
</view>
<!-- 分页 -->
<view class="pagination" v-if="total > 0">
<text class="page-info">显示 {{ start }}-{{ end }} {{ total }} 个产品</text>
<view class="page-controls">
<view class="page-btn" :class="{ disabled: current === 1 }" @tap="onPrev">上一页</view>
<view
class="page-num"
:class="{ active: current === item }"
v-for="(item, index) in pageNumbers"
:key="index"
@tap="onGoPage(item)"
>{{ item }}</view>
<view class="page-btn" :class="{ disabled: current === totalPages }" @tap="onNext">下一页</view>
</view>
<view class="page-size"><text>{{ pageSize }}/</text></view>
<!-- 底部加载提示 -->
<view class="load-tip" v-if="list.length > 0">
<text v-if="loading">加载中...</text>
<text v-else-if="!hasMore">没有更多了</text>
</view>
<view class="loading-more" v-if="loading"><text>加载中...</text></view>
</scroll-view>
</view>
</template>
@@ -80,31 +67,25 @@ export default {
list: { type: Array, default: () => [] },
subCategories: { type: Array, default: () => [] },
activeSubId: { type: [String, Number], default: '' },
total: { type: Number, default: 0 },
current: { type: Number, default: 1 },
pageSize: { type: Number, default: 10 },
totalPages: { type: Number, default: 1 },
pageNumbers: { type: Array, default: () => [] },
start: { type: Number, default: 1 },
end: { type: Number, default: 10 },
loading: { type: Boolean, default: false }
hasMore: { type: Boolean, default: true },
loading: { type: Boolean, default: false },
scrollTopVal: { type: Number, default: 0 }
},
methods: {
selectSub(id) { this.$emit('sub-select', id) },
onTapProduct(item) { this.$emit('product-click', item) },
onPrev() { if (this.current > 1) this.$emit('page-change', this.current - 1) },
onNext() { if (this.current < this.totalPages) this.$emit('page-change', this.current + 1) },
onGoPage(page) { this.$emit('page-change', page) }
onScrollToLower() { this.$emit('scroll-to-lower') }
}
}
</script>
<style scoped>
/* 右侧内容区 - 上下分:顶部条件 + 下方滚动 */
/* 右侧内容区 - 上下分:顶部条件 + 下方滚动
flex:1 与 height:100% 冲突,二选一(保留 flex:1 */
.right-content {
flex: 1;
min-width: 0;
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
background: #f2f2f2;
@@ -135,22 +116,23 @@ export default {
color: #ff6800;
}
/* 滚动商品区 */
/* 滚动商品区 - uni-app scroll-view 在 flex 布局里必须同时有 flex:1 + height:0
仅 min-height:0 无法让部分端的 scroll-view 正确计算内部 viewport 高度 */
.product-scroll {
flex: 1;
height: 0;
min-height: 0;
overflow: hidden;
}
/* 商品网格 - 2列自适应(避免宽度+间距同时固定导致挤压) */
/* 商品网格 - 固定2列 grid,不会因商品个数变化而拉伸占行 */
.product-grid {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16rpx;
padding: 20rpx;
}
.product-card {
flex: 1 1 calc(50% - 8rpx);
min-width: 0;
background: #ffffff;
border-radius: 12rpx;
@@ -212,53 +194,8 @@ export default {
line-height: 1.2;
}
/* 分页 */
.pagination {
padding: 32rpx 20rpx;
display: flex;
flex-direction: column;
align-items: center;
gap: 20rpx;
}
.page-info {
font-size: 22rpx;
color: #999999;
}
.page-controls {
display: flex;
align-items: center;
gap: 12rpx;
}
.page-btn {
padding: 10rpx 20rpx;
font-size: 24rpx;
color: #666666;
background: #f5f5f5;
border-radius: 8rpx;
}
.page-btn.disabled {
color: #cccccc;
}
.page-num {
width: 56rpx;
height: 56rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #666666;
background: #f5f5f5;
border-radius: 8rpx;
}
.page-num.active {
background: #ff6800;
color: #ffffff;
}
.page-size {
font-size: 22rpx;
color: #999999;
}
.loading-more {
/* 底部加载提示 */
.load-tip {
padding: 32rpx;
text-align: center;
font-size: 24rpx;