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:
2026-07-23 19:54:22 +08:00
parent ff3a120b55
commit b687c50e3d
3 changed files with 22 additions and 4 deletions

View File

@@ -1,7 +1,20 @@
.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__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); }