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

81
miniprogram/pages/chapters/chapters.wxss
View File

@@ -75,32 +75,75 @@
width: 100%;
}
/* ===== 目录加载中 ===== */
.parts-loading {
/* ===== 目录骨架屏 ===== */
.parts-skeleton {
padding: 32rpx;
}
.skeleton-book-card {
display: flex;
align-items: center;
gap: 24rpx;
padding: 32rpx;
background: linear-gradient(135deg, #1c1c1e 0%, #2c2c2e 100%);
border-radius: 32rpx;
margin-bottom: 32rpx;
}
.skeleton-book-icon {
width: 96rpx;
height: 96rpx;
border-radius: 24rpx;
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-book-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 16rpx;
}
.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;
}
.skeleton-title { width: 70%; }
.skeleton-subtitle { width: 50%; }
.skeleton-count {
width: 80rpx;
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: 16rpx;
}
.skeleton-part-list {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120rpx 0;
gap: 24rpx;
}
.parts-loading-spinner {
width: 64rpx;
height: 64rpx;
border: 6rpx solid rgba(255, 255, 255, 0.1);
border-top-color: #00CED1;
border-radius: 50%;
animation: parts-spin 0.8s linear infinite;
.skeleton-part-item .skeleton-part-header {
height: 100rpx;
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: 16rpx;
}
.parts-loading-text {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.5);
}
@keyframes parts-spin {
to { transform: rotate(360deg); }
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ===== 书籍信息卡 ===== */