- 根因: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 字段准确
34 lines
1.3 KiB
Plaintext
34 lines
1.3 KiB
Plaintext
.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); } }
|