fix(category): 实现触底分页加载更多,修复往下翻无内容
- 根因:category.js 的 loadExercises 永远只取第 1 页(page=1, pageSize=20), 且用 exercises = res.items 整体替换、从不追加,也没有 onReachBottom/触底加载。 动作数远超 20(全部 1324、胸 163)时,往下翻只能看到前 20 条,其余永远加载不出来。 - 修复: * loadExercises 首次加载重置 page=1 并按 items.length<total 计算 hasMore * 新增 onReachBottom + loadMore:触底时 page+1、concat 追加、刷新 hasMore * wxml 在网格下方加 loadmore 状态条(加载中 spinner/已经到底啦/上拉加载更多) * wxss 加 .spinner 旋转动画(用 --accent/--line,均在 app.wxss 已定义) - 后端分页已验证:page=2 返回偏移后的不同数据,total 字段准确
This commit is contained in:
@@ -29,6 +29,8 @@ Page({
|
|||||||
activeValue: '',
|
activeValue: '',
|
||||||
exercises: [],
|
exercises: [],
|
||||||
loading: true,
|
loading: true,
|
||||||
|
loadingMore: false,
|
||||||
|
hasMore: true,
|
||||||
page: 1,
|
page: 1,
|
||||||
pageSize: 20,
|
pageSize: 20,
|
||||||
total: 0
|
total: 0
|
||||||
@@ -67,20 +69,49 @@ Page({
|
|||||||
},
|
},
|
||||||
|
|
||||||
loadExercises() {
|
loadExercises() {
|
||||||
this.setData({ loading: true });
|
this.setData({ loading: true, page: 1 });
|
||||||
const params = { page: this.data.page, pageSize: this.data.pageSize };
|
const params = { page: 1, pageSize: this.data.pageSize };
|
||||||
params[this.data.dimension] = this.data.activeValue;
|
params[this.data.dimension] = this.data.activeValue;
|
||||||
svc.listExercises(params).then((res) => {
|
svc.listExercises(params).then((res) => {
|
||||||
|
const items = (res && res.items) || [];
|
||||||
|
const total = (res && res.total) || 0;
|
||||||
this.setData({
|
this.setData({
|
||||||
exercises: (res && res.items) || [],
|
exercises: items,
|
||||||
total: (res && res.total) || 0,
|
total,
|
||||||
loading: false
|
loading: false,
|
||||||
|
hasMore: items.length < total
|
||||||
});
|
});
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
this.setData({ loading: false });
|
this.setData({ loading: false });
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
onReachBottom() {
|
||||||
|
if (this.data.loading || this.data.loadingMore || !this.data.hasMore) return;
|
||||||
|
this.loadMore();
|
||||||
|
},
|
||||||
|
|
||||||
|
loadMore() {
|
||||||
|
const next = this.data.page + 1;
|
||||||
|
this.setData({ loadingMore: true });
|
||||||
|
const params = { page: next, pageSize: this.data.pageSize };
|
||||||
|
params[this.data.dimension] = this.data.activeValue;
|
||||||
|
svc.listExercises(params).then((res) => {
|
||||||
|
const items = (res && res.items) || [];
|
||||||
|
const total = (res && res.total) || 0;
|
||||||
|
const merged = this.data.exercises.concat(items);
|
||||||
|
this.setData({
|
||||||
|
exercises: merged,
|
||||||
|
total,
|
||||||
|
page: next,
|
||||||
|
loadingMore: false,
|
||||||
|
hasMore: merged.length < total
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
this.setData({ loadingMore: false });
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
onValue(e) {
|
onValue(e) {
|
||||||
const value = e.detail.value;
|
const value = e.detail.value;
|
||||||
if (value === this.data.activeValue) return;
|
if (value === this.data.activeValue) return;
|
||||||
|
|||||||
@@ -21,6 +21,16 @@
|
|||||||
<exercise-card exercise="{{item}}" catch:tap="onExercise" />
|
<exercise-card exercise="{{item}}" catch:tap="onExercise" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<view wx:if="{{exercises.length}}" class="loadmore">
|
||||||
|
<view wx:if="{{loadingMore}}" class="loadmore__loading">
|
||||||
|
<view class="spinner"></view>
|
||||||
|
<text>加载中…</text>
|
||||||
|
</view>
|
||||||
|
<view wx:elif="{{!hasMore}}" class="loadmore__end muted">已经到底啦</view>
|
||||||
|
<view wx:else class="loadmore__hint muted">上拉加载更多</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<view wx:elif="{{!loading}}" class="empty">暂无数据</view>
|
<view wx:elif="{{!loading}}" class="empty">暂无数据</view>
|
||||||
<view wx:else class="empty">加载中…</view>
|
<view wx:else class="empty">加载中…</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -19,3 +19,15 @@
|
|||||||
.grid { display: flex; flex-wrap: wrap; gap: 18rpx; margin-top: 12rpx; }
|
.grid { display: flex; flex-wrap: wrap; gap: 18rpx; margin-top: 12rpx; }
|
||||||
.grid__item { width: calc((100% - 18rpx) / 2); }
|
.grid__item { width: calc((100% - 18rpx) / 2); }
|
||||||
.empty { color: var(--text-3); font-size: 26rpx; text-align: center; padding: 80rpx 0; }
|
.empty { color: var(--text-3); font-size: 26rpx; text-align: center; padding: 80rpx 0; }
|
||||||
|
|
||||||
|
/* 触底加载更多状态条 */
|
||||||
|
.loadmore { display: flex; justify-content: center; padding: 36rpx 0 12rpx; }
|
||||||
|
.loadmore__loading { display: flex; align-items: center; gap: 12rpx; color: var(--text-3); font-size: 26rpx; }
|
||||||
|
.spinner {
|
||||||
|
width: 32rpx; height: 32rpx; border-radius: 50%;
|
||||||
|
border: 4rpx solid var(--line);
|
||||||
|
border-top-color: var(--accent);
|
||||||
|
animation: spin 0.8s linear infinite;
|
||||||
|
}
|
||||||
|
.loadmore__end, .loadmore__hint { font-size: 26rpx; }
|
||||||
|
@keyframes spin { to { transform: rotate(360deg); } }
|
||||||
|
|||||||
Reference in New Issue
Block a user