Files
fitness-coach/miniprogram/pages/category/category.wxss
wm ec0eb98411 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 字段准确
2026-07-23 20:13:53 +08:00

34 lines
1.3 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

.page { min-height: 100vh; background: var(--bg-grad); }
/* 分类横列吸顶top = 状态栏高度 + 导航栏 88rpx精确贴在 navbar 下方,不同机型不串位 */
.filterbar {
position: sticky;
z-index: 40;
white-space: nowrap;
padding: 8rpx 0 4rpx;
background: var(--bg-grad);
}
.filterbar chip { display: inline-block; margin-right: 16rpx; }
.filterbar__spacer { display: inline-block; width: 4rpx; }
/* 加载 / 空态占位:横列区域常驻,避免加载期间整块消失 */
.filterbar__loading {
font-size: 24rpx;
padding: 22rpx 4rpx 14rpx;
background: var(--bg-grad);
}
.count { font-size: 24rpx; margin: 20rpx 0 8rpx; }
.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); } }