diff --git a/miniprogram/pages/category/category.js b/miniprogram/pages/category/category.js
index 124ffb4..4ae43b2 100644
--- a/miniprogram/pages/category/category.js
+++ b/miniprogram/pages/category/category.js
@@ -29,6 +29,8 @@ Page({
activeValue: '',
exercises: [],
loading: true,
+ loadingMore: false,
+ hasMore: true,
page: 1,
pageSize: 20,
total: 0
@@ -67,20 +69,49 @@ Page({
},
loadExercises() {
- this.setData({ loading: true });
- const params = { page: this.data.page, pageSize: this.data.pageSize };
+ this.setData({ loading: true, page: 1 });
+ const params = { page: 1, 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;
this.setData({
- exercises: (res && res.items) || [],
- total: (res && res.total) || 0,
- loading: false
+ exercises: items,
+ total,
+ loading: false,
+ hasMore: items.length < total
});
}).catch(() => {
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) {
const value = e.detail.value;
if (value === this.data.activeValue) return;
diff --git a/miniprogram/pages/category/category.wxml b/miniprogram/pages/category/category.wxml
index 10143c3..a9441d5 100644
--- a/miniprogram/pages/category/category.wxml
+++ b/miniprogram/pages/category/category.wxml
@@ -21,6 +21,16 @@
+
+
+
+
+ 加载中…
+
+ 已经到底啦
+ 上拉加载更多
+
+
暂无数据
加载中…
diff --git a/miniprogram/pages/category/category.wxss b/miniprogram/pages/category/category.wxss
index 11fde5c..7d95a75 100644
--- a/miniprogram/pages/category/category.wxss
+++ b/miniprogram/pages/category/category.wxss
@@ -19,3 +19,15 @@
.grid { display: flex; flex-wrap: wrap; gap: 18rpx; margin-top: 12rpx; }
.grid__item { width: calc((100% - 18rpx) / 2); }
.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); } }