|
|
@@ -5,12 +5,14 @@
|
|
|
<GoodsCard :item="item" :show-price="showPrice" @click="$emit('itemClick', item)" />
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="skeleton-list" v-else-if="loading">
|
|
|
+ <view class="skeleton-item" v-for="i in 6" :key="i">
|
|
|
+ <u-skeleton rows="3" title :loading="loading" animate></u-skeleton>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<view class="empty" v-else-if="!loading">
|
|
|
<text class="empty-text">暂无商品</text>
|
|
|
</view>
|
|
|
- <view class="loading" v-if="loading">
|
|
|
- <text class="loading-text">加载中...</text>
|
|
|
- </view>
|
|
|
<view class="load-more" v-if="hasMore && !loading && list.length > 0" @click="$emit('loadMore')">
|
|
|
<text>加载更多</text>
|
|
|
</view>
|
|
|
@@ -46,6 +48,19 @@ export default {
|
|
|
.list-item {
|
|
|
width: 100%;
|
|
|
}
|
|
|
+.skeleton-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 24rpx;
|
|
|
+}
|
|
|
+.skeleton-item {
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
.empty,
|
|
|
.loading {
|
|
|
padding: 80rpx 0;
|