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 在加载期间整块消失;现加载/空态常驻占位(显示『加载分类中…』/『暂无分类』)
This commit is contained in:
@@ -51,9 +51,13 @@ Page({
|
|||||||
this.setData({ loading: true });
|
this.setData({ loading: true });
|
||||||
const key = DIM_MAP[this.data.dimension] || 'body-parts';
|
const key = DIM_MAP[this.data.dimension] || 'body-parts';
|
||||||
svc.getCategories(key).then((items) => {
|
svc.getCategories(key).then((items) => {
|
||||||
|
const list = (items || []).slice();
|
||||||
|
// 头部插入「全部」项:无 value 入参时默认选中,明确当前为「全部」
|
||||||
|
list.unshift({ value: '', label: '全部' });
|
||||||
|
const activeValue = this.data.value || '';
|
||||||
this.setData({
|
this.setData({
|
||||||
values: items || [],
|
values: list,
|
||||||
activeValue: this.data.value,
|
activeValue: activeValue,
|
||||||
loading: false
|
loading: false
|
||||||
});
|
});
|
||||||
this.loadExercises();
|
this.loadExercises();
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<navbar title="{{title}}" show-back />
|
<navbar title="{{title}}" show-back />
|
||||||
|
|
||||||
<view class="section" style="padding-top: 8rpx;">
|
<view class="section" style="padding-top: 8rpx;">
|
||||||
<scroll-view wx:if="{{values.length}}" scroll-x class="filterbar">
|
<scroll-view wx:if="{{values.length}}" scroll-x class="filterbar" style="top: calc({{statusBarHeight}}px + 88rpx);">
|
||||||
<chip
|
<chip
|
||||||
wx:for="{{values}}"
|
wx:for="{{values}}"
|
||||||
wx:key="value"
|
wx:key="value"
|
||||||
@@ -12,6 +12,7 @@
|
|||||||
bind:select="onValue" />
|
bind:select="onValue" />
|
||||||
<view class="filterbar__spacer"></view>
|
<view class="filterbar__spacer"></view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
|
<view wx:else class="filterbar__loading muted">{{ loading ? '加载分类中…' : '暂无分类' }}</view>
|
||||||
|
|
||||||
<view class="count muted" wx:if="{{!loading}}">共 {{total}} 个动作</view>
|
<view class="count muted" wx:if="{{!loading}}">共 {{total}} 个动作</view>
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,20 @@
|
|||||||
.page { min-height: 100vh; background: var(--bg-grad); }
|
.page { min-height: 100vh; background: var(--bg-grad); }
|
||||||
.filterbar { white-space: nowrap; padding: 8rpx 0 4rpx; }
|
/* 分类横列吸顶: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 chip { display: inline-block; margin-right: 16rpx; }
|
||||||
.filterbar__spacer { display: inline-block; width: 4rpx; }
|
.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; }
|
.count { font-size: 24rpx; margin: 20rpx 0 8rpx; }
|
||||||
.grid { display: flex; flex-wrap: wrap; gap: 18rpx; margin-top: 12rpx; }
|
.grid { display: flex; flex-wrap: wrap; gap: 18rpx; margin-top: 12rpx; }
|
||||||
.grid__item { width: calc((100% - 18rpx) / 2); }
|
.grid__item { width: calc((100% - 18rpx) / 2); }
|
||||||
|
|||||||
Reference in New Issue
Block a user