fnvtk/soul-yongping
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

在多个页面中通过骨架屏优化加载状态。

Browse Source 
在章节、礼物代付详情、阅读和搜索结果页面，用骨架屏替换传统加载指示器，以提升数据获取过程中的用户体验。
更新骨架屏样式，使加载状态更加美观。
实现章节和配置信息的缓存策略，以优化性能并减少冷启动问题。
This commit is contained in:
Alex-larget
2026-03-18 12:56:34 +08:00
parent 1fa20756a8
commit 46f94a9c81
23 changed files with 841 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
miniprogram/pages/gift-pay/detail.wxml
View File

@@ -14,9 +14,20 @@
<view class="content" style="padding-top: calc({{statusBarHeight}}px + 88rpx);">
<block wx:if="{{loading}}">
<view class="loading-box">
<view class="loading-spinner"></view>
<text class="loading-text">加载中...</text>
<view class="skeleton-wrap">
<view class="skeleton-hero">
<view class="skeleton-hero-badge"></view>
<view class="skeleton-hero-title"></view>
<view class="skeleton-hero-desc"></view>
<view class="skeleton-hero-amount"></view>
</view>
<view class="skeleton-card">
<view class="skeleton-avatar"></view>
<view class="skeleton-info">
<view class="skeleton-line"></view>
<view class="skeleton-line short"></view>
</view>
</view>
</view>
</block>
<block wx:elif="{{detail}}">

103
miniprogram/pages/gift-pay/detail.wxss
View File

@@ -56,32 +56,97 @@
padding: 24rpx 24rpx 200rpx;
}
/* 加载 */
.loading-box {
/* 骨架屏 */
.skeleton-wrap {
padding: 24rpx 0;
}
.skeleton-hero {
background: rgba(24, 24, 27, 0.8);
border-radius: 32rpx;
padding: 40rpx;
margin-bottom: 32rpx;
}
.skeleton-hero-badge {
width: 120rpx;
height: 40rpx;
background: linear-gradient(90deg, #1c1c1e 25%, #2c2c2e 50%, #1c1c1e 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: 8rpx;
margin-bottom: 24rpx;
}
.skeleton-hero-title {
width: 80%;
height: 48rpx;
background: linear-gradient(90deg, #1c1c1e 25%, #2c2c2e 50%, #1c1c1e 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: 8rpx;
margin-bottom: 16rpx;
}
.skeleton-hero-desc {
width: 60%;
height: 32rpx;
background: linear-gradient(90deg, #1c1c1e 25%, #2c2c2e 50%, #1c1c1e 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: 8rpx;
margin-bottom: 32rpx;
}
.skeleton-hero-amount {
width: 200rpx;
height: 64rpx;
background: linear-gradient(90deg, #1c1c1e 25%, #2c2c2e 50%, #1c1c1e 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: 12rpx;
}
.skeleton-card {
display: flex;
align-items: center;
gap: 24rpx;
padding: 32rpx;
background: rgba(24, 24, 27, 0.6);
border-radius: 24rpx;
}
.skeleton-avatar {
width: 96rpx;
height: 96rpx;
border-radius: 50%;
background: linear-gradient(90deg, #1c1c1e 25%, #2c2c2e 50%, #1c1c1e 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
flex-shrink: 0;
}
.skeleton-info {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120rpx 0;
gap: 16rpx;
}
.loading-spinner {
width: 48rpx;
height: 48rpx;
border: 4rpx solid rgba(20, 184, 166, 0.2);
border-top-color: #14b8a6;
border-radius: 50%;
animation: spin 0.8s linear infinite;
.skeleton-info .skeleton-line {
height: 32rpx;
background: linear-gradient(90deg, #1c1c1e 25%, #2c2c2e 50%, #1c1c1e 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: 8rpx;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.skeleton-info .skeleton-line { width: 70%; }
.skeleton-info .skeleton-line.short { width: 45%; }
.loading-text {
margin-top: 24rpx;
font-size: 28rpx;
color: rgba(255, 255, 255, 0.45);
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* 产品 Hero 卡片 */