fix(leaderboard): 修复加载期空白页,加 loading 图标

- leaderboard.json 未注册 ui-skeleton,骨架屏不渲染致 loading 期空白
- 注册 ui-skeleton,骨架屏恢复 shimmer
- 骨架屏上方加主题色旋转加载图标 + "加载中…"

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
liucheng
2026-07-25 14:21:04 +08:00
parent ed7029faf9
commit e682f07892
3 changed files with 39 additions and 2 deletions
+3 -1
View File
@@ -1,5 +1,7 @@
{
"navigationBarTitleText": "排行榜",
"enablePullDownRefresh": true,
"usingComponents": {}
"usingComponents": {
"ui-skeleton": "../../components/ui-skeleton/ui-skeleton"
}
}
+5 -1
View File
@@ -12,8 +12,12 @@
</view>
</view>
<!-- Loading skeleton -->
<!-- Loading: 旋转加载图标 + 骨架屏 -->
<view class="leaderboard-skeleton" wx:if="{{loading}}">
<view class="lb-loading">
<view class="lb-loading__spinner"></view>
<text class="lb-loading__text">加载中…</text>
</view>
<ui-skeleton variant="list-row" count="{{5}}" />
</view>
+31
View File
@@ -427,3 +427,34 @@
font-size: 26rpx;
color: var(--text-secondary);
}
/* Loading: 旋转加载图标 + 骨架屏容器 */
.leaderboard-skeleton {
padding: 40rpx 32rpx 0;
}
.lb-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 20rpx;
padding: 24rpx 0 48rpx;
}
.lb-loading__spinner {
width: 56rpx;
height: 56rpx;
border: 4rpx solid rgba(var(--primary-rgb), 0.15);
border-top-color: var(--primary);
border-radius: 50%;
animation: lbSpin 0.8s linear infinite;
}
.lb-loading__text {
font-size: 26rpx;
color: var(--text-secondary);
}
@keyframes lbSpin {
to { transform: rotate(360deg); }
}