fix(leaderboard): 修复加载期空白页,加 loading 图标
- leaderboard.json 未注册 ui-skeleton,骨架屏不渲染致 loading 期空白 - 注册 ui-skeleton,骨架屏恢复 shimmer - 骨架屏上方加主题色旋转加载图标 + "加载中…" Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,7 @@
|
||||
{
|
||||
"navigationBarTitleText": "排行榜",
|
||||
"enablePullDownRefresh": true,
|
||||
"usingComponents": {}
|
||||
"usingComponents": {
|
||||
"ui-skeleton": "../../components/ui-skeleton/ui-skeleton"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user