wm
ec0eb98411
- 根因：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 字段准确
126 lines
3.2 KiB
JavaScript
126 lines
3.2 KiB
JavaScript
const app = getApp();
|
|
const svc = require('../../services/exercise');
|
|
|
|
const DIM_MAP = {
|
|
bodyPart: 'body-parts',
|
|
equipment: 'equipment',
|
|
target: 'targets',
|
|
muscleGroup: 'muscle-groups',
|
|
type: 'types'
|
|
};
|
|
|
|
function labelForDim(d) {
|
|
return ({
|
|
bodyPart: '按部位',
|
|
equipment: '按器械',
|
|
target: '按目标',
|
|
muscleGroup: '按肌群',
|
|
type: '按类型'
|
|
})[d] || '分类';
|
|
}
|
|
|
|
Page({
|
|
data: {
|
|
statusBarHeight: 20,
|
|
dimension: 'bodyPart',
|
|
title: '分类',
|
|
value: '',
|
|
values: [],
|
|
activeValue: '',
|
|
exercises: [],
|
|
loading: true,
|
|
loadingMore: false,
|
|
hasMore: true,
|
|
page: 1,
|
|
pageSize: 20,
|
|
total: 0
|
|
},
|
|
|
|
onLoad(query) {
|
|
const dimension = query.dimension || 'bodyPart';
|
|
const value = query.value || '';
|
|
const title = query.title || labelForDim(dimension);
|
|
this.setData({
|
|
statusBarHeight: app.globalData.statusBarHeight || 20,
|
|
dimension,
|
|
value,
|
|
title
|
|
});
|
|
this.loadValues();
|
|
},
|
|
|
|
loadValues() {
|
|
this.setData({ loading: true });
|
|
const key = DIM_MAP[this.data.dimension] || 'body-parts';
|
|
svc.getCategories(key).then((items) => {
|
|
const list = (items || []).slice();
|
|
// 头部插入「全部」项：无 value 入参时默认选中，明确当前为「全部」
|
|
list.unshift({ value: '', label: '全部' });
|
|
const activeValue = this.data.value || '';
|
|
this.setData({
|
|
values: list,
|
|
activeValue: activeValue,
|
|
loading: false
|
|
});
|
|
this.loadExercises();
|
|
}).catch(() => {
|
|
this.setData({ loading: false });
|
|
});
|
|
},
|
|
|
|
loadExercises() {
|
|
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: 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;
|
|
this.setData({ activeValue: value, page: 1 }, () => this.loadExercises());
|
|
},
|
|
|
|
onExercise(e) {
|
|
if (!e || !e.detail || !e.detail.id) return;
|
|
wx.navigateTo({ url: '/pages/detail/detail?id=' + encodeURIComponent(e.detail.id) });
|
|
}
|
|
});
|