feat(diy-category): add skeleton loading state for category page
优化分类页面加载体验,请求分类数据时显示骨架屏占位,避免页面先展示空态再切换内容造成的闪烁问题,同时调整了空状态的渲染逻辑,请求失败时也能正确显示空态占位
This commit is contained in:
@@ -77,7 +77,21 @@
|
|||||||
</uni-popup>
|
</uni-popup>
|
||||||
</view>
|
</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">
|
<block v-if="categoryTree.length">
|
||||||
<scroll-view scroll-y="true" class="tree-wrap">
|
<scroll-view scroll-y="true" class="tree-wrap">
|
||||||
<view class="category-item-wrap">
|
<view class="category-item-wrap">
|
||||||
@@ -138,10 +152,6 @@
|
|||||||
<view class="tips">{{ $lang('components-diy.diy-category.noCategory') }}</view>
|
<view class="tips">{{ $lang('components-diy.diy-category.noCategory') }}</view>
|
||||||
</view>
|
</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="cart-box" v-if="(value.template == 2 || value.template == 4) && value.quickBuy && storeToken && categoryTree && categoryTree.length">
|
||||||
<view class="left-wrap">
|
<view class="left-wrap">
|
||||||
@@ -209,7 +219,11 @@ export default {
|
|||||||
isList: false,
|
isList: false,
|
||||||
lang: uni.getStorageSync("lang"),
|
lang: uni.getStorageSync("lang"),
|
||||||
lastSecondCategoryName: '',
|
lastSecondCategoryName: '',
|
||||||
template99Category: null
|
template99Category: null,
|
||||||
|
// 修复体验: 进入页面初期显示 "暂未分类" 然后又变成有数据的体验很差
|
||||||
|
// 用 categoryTreeLoading 区分"还在请求"和"真的没分类", 请求未完成时
|
||||||
|
// 显示骨架占位而非空态文案
|
||||||
|
categoryTreeLoading: true
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
@@ -359,6 +373,7 @@ export default {
|
|||||||
* 获取全部分类
|
* 获取全部分类
|
||||||
*/
|
*/
|
||||||
getCategoryTree() {
|
getCategoryTree() {
|
||||||
|
this.categoryTreeLoading = true;
|
||||||
this.$api.sendRequest({
|
this.$api.sendRequest({
|
||||||
url: '/api/goodscategory/tree',
|
url: '/api/goodscategory/tree',
|
||||||
data: {
|
data: {
|
||||||
@@ -388,6 +403,14 @@ export default {
|
|||||||
this.loadGlobalSecondCategoryBtns();
|
this.loadGlobalSecondCategoryBtns();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
fail: () => {
|
||||||
|
// 失败也保证 loading 关闭, 让骨架替换为"暂无分类"空态
|
||||||
|
this.categoryTree = this.categoryTree || [];
|
||||||
|
},
|
||||||
|
complete: () => {
|
||||||
|
// 无论成功失败都关闭 loading 骨架
|
||||||
|
this.categoryTreeLoading = false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
@@ -913,6 +936,69 @@ export default {
|
|||||||
opacity: 0;
|
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 {
|
.category-template-4 {
|
||||||
.search-box {
|
.search-box {
|
||||||
|
|||||||
Reference in New Issue
Block a user