feat(diy-category): add skeleton loading state for category page
优化分类页面加载体验,请求分类数据时显示骨架屏占位,避免页面先展示空态再切换内容造成的闪烁问题,同时调整了空状态的渲染逻辑,请求失败时也能正确显示空态占位
This commit is contained in:
@@ -77,7 +77,21 @@
|
||||
</uni-popup>
|
||||
</view>
|
||||
|
||||
<view class="content-box" v-if="categoryTree">
|
||||
<!-- 全屏骨架占位 (只显示: 左分类树 + 右商品网格 + 底部空隙, 不画 navbar/TabBar,
|
||||
避免与小程序/H5 顶部 navbar / diy-bottom-nav 错位)。
|
||||
通过 v-if 拿到 categoryTreeLoading 时按真实布局骨架填充。
|
||||
search-box / 商品 nav-bar 由外层 category.vue 渲染, 不在本组件里动它 -->
|
||||
<view class="category-page-skeleton" v-if="categoryTreeLoading">
|
||||
<view class="skeleton-content">
|
||||
<view class="skeleton-tree">
|
||||
<view class="skeleton-tree-item" v-for="n in 8" :key="'sk-tree-' + n"></view>
|
||||
</view>
|
||||
<view class="skeleton-grid">
|
||||
<view class="skeleton-card" v-for="n in 6" :key="'sk-card-' + n"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-box" v-else-if="categoryTree">
|
||||
<block v-if="categoryTree.length">
|
||||
<scroll-view scroll-y="true" class="tree-wrap">
|
||||
<view class="category-item-wrap">
|
||||
@@ -138,10 +152,6 @@
|
||||
<view class="tips">{{ $lang('components-diy.diy-category.noCategory') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="category-empty" v-else>
|
||||
<image :src="$util.img('public/uniapp/category/empty.png')" mode="widthFix" show-menu-by-longpress></image>
|
||||
<view class="tips">{{ $lang('components-diy.diy-category.noCategory') }}</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="cart-box" v-if="(value.template == 2 || value.template == 4) && value.quickBuy && storeToken && categoryTree && categoryTree.length">
|
||||
<view class="left-wrap">
|
||||
@@ -209,7 +219,11 @@ export default {
|
||||
isList: false,
|
||||
lang: uni.getStorageSync("lang"),
|
||||
lastSecondCategoryName: '',
|
||||
template99Category: null
|
||||
template99Category: null,
|
||||
// 修复体验: 进入页面初期显示 "暂未分类" 然后又变成有数据的体验很差
|
||||
// 用 categoryTreeLoading 区分"还在请求"和"真的没分类", 请求未完成时
|
||||
// 显示骨架占位而非空态文案
|
||||
categoryTreeLoading: true
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@@ -359,6 +373,7 @@ export default {
|
||||
* 获取全部分类
|
||||
*/
|
||||
getCategoryTree() {
|
||||
this.categoryTreeLoading = true;
|
||||
this.$api.sendRequest({
|
||||
url: '/api/goodscategory/tree',
|
||||
data: {
|
||||
@@ -388,6 +403,14 @@ export default {
|
||||
this.loadGlobalSecondCategoryBtns();
|
||||
}
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
// 失败也保证 loading 关闭, 让骨架替换为"暂无分类"空态
|
||||
this.categoryTree = this.categoryTree || [];
|
||||
},
|
||||
complete: () => {
|
||||
// 无论成功失败都关闭 loading 骨架
|
||||
this.categoryTreeLoading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
@@ -913,6 +936,69 @@ export default {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// 全屏骨架占位 — 不画 navbar/TabBar (由外层 category.vue 渲染), 避免错位
|
||||
.category-page-skeleton {
|
||||
flex: 1;
|
||||
height: 0; // 与 .content-box 一致, 让 flex 子项撑开父容器剩余高度
|
||||
display: flex;
|
||||
background-color: #f4f6fa;
|
||||
|
||||
.skeleton-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
|
||||
.skeleton-tree {
|
||||
width: 170rpx;
|
||||
background-color: #f5f5f5;
|
||||
padding: 20rpx 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
.skeleton-tree-item {
|
||||
height: 40rpx;
|
||||
margin: 0 28rpx;
|
||||
border-radius: 12rpx;
|
||||
background: linear-gradient(90deg, #ececec 25%, #f5f5f5 37%, #ececec 63%);
|
||||
background-size: 400% 100%;
|
||||
animation: category-skeleton-shimmer 1.4s ease infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-grid {
|
||||
flex: 1;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
gap: 16rpx;
|
||||
background-color: #f4f6fa;
|
||||
min-width: 0;
|
||||
|
||||
.skeleton-card {
|
||||
width: calc((100% - 32rpx) / 3);
|
||||
height: 220rpx;
|
||||
border-radius: 16rpx;
|
||||
background: linear-gradient(90deg, #ececec 25%, #f5f5f5 37%, #ececec 63%);
|
||||
background-size: 400% 100%;
|
||||
animation: category-skeleton-shimmer 1.4s ease infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes category-skeleton-shimmer {
|
||||
0% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// 风格四
|
||||
.category-template-4 {
|
||||
.search-box {
|
||||
|
||||
Reference in New Issue
Block a user