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); } }