Files
fitness-coach/miniprogram/pages/category/category.js
wm b687c50e3d fix(category): 分类横列吸顶固定 + 默认高亮「全部」+ 加载态常驻
1) 滚动时顶部分类横列不被隐藏
   - filterbar 改 position:sticky,top 用 calc(statusBarHeight px + 88rpx) 精确贴在 navbar 下方,
     不同机型状态栏高度差异下不串位;加背景色(var(--bg-grad))避免滚动时内容透出
2) 修复「加载有问题」的感知问题
   - 进入分类页(如首页分类 tab)时 activeValue 为空且 values 无空值项,导致所有 chip 都不高亮;
     现头部插入「全部」项(value:'')并默认选中,进入即明确当前为全部动作
   - filterbar 原 wx:if values.length 在加载期间整块消失;现加载/空态常驻占位(显示『加载分类中…』/『暂无分类』)
2026-07-23 19:54:22 +08:00

95 lines
2.3 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,
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 });
const params = { page: this.data.page, pageSize: this.data.pageSize };
params[this.data.dimension] = this.data.activeValue;
svc.listExercises(params).then((res) => {
this.setData({
exercises: (res && res.items) || [],
total: (res && res.total) || 0,
loading: false
});
}).catch(() => {
this.setData({ loading: 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) });
}
});