Ver Fonte

fix: 调整商城-商品列表模块

wenxingxing há 7 horas atrás
pai
commit
dafae54b57
2 ficheiros alterados com 19 adições e 4 exclusões
  1. 18 3
      pages_mall/components/GoodsList.vue
  2. 1 1
      pages_mall/components/GoodsNav.vue

+ 18 - 3
pages_mall/components/GoodsList.vue

@@ -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;

+ 1 - 1
pages_mall/components/GoodsNav.vue

@@ -53,7 +53,7 @@ export default {
 	display: flex;
 	align-items: center;
 	padding: 0 24rpx;
-	gap: 30rpx;
+	gap: 20rpx;
 }
 .nav-all {
 	flex-shrink: 0;