1

pages/category/category.vue

@@ -23,14 +23,24 @@
 			<!-- 占位符适配固定头部 -->
 			<view class="header-placeholder" :style="{ height: (statusBarHeight + 90) + 'px' }"></view>
 			
-			<!-- 子分类金刚区 -->
+			<!-- 子分类金刚区 (支持翻页) -->
 			<view class="sub-grid-wrap" v-if="subCategories.length > 0">
+				<swiper class="sub-swiper" :duration="300" @change="onSubSwiperChange">
+					<swiper-item v-for="(group, gIdx) in groupedSubCategories" :key="gIdx">
 						<view class="sub-grid">
-					<view class="sub-item" v-for="(sub, idx) in subCategories" :key="idx" @click="selectSub(sub.second_category)">
+							<view class="sub-item" v-for="(sub, idx) in group" :key="idx" @click="selectSub(sub.second_category)">
 								<image class="sub-icon" :src="sub.img_url" mode="aspectFit"></image>
 								<text class="sub-text">{{ sub.cate_name.trim() }}</text>
 							</view>
 						</view>
+					</swiper-item>
+				</swiper>
+				<!-- 进度条指示器 (仅在多页时显示) -->
+				<view class="swiper-dot-wrap" v-if="groupedSubCategories.length > 1">
+					<view class="swiper-dot-bar">
+						<view class="swiper-dot-active" :style="{ left: dotLeft + '%' }"></view>
+					</view>
+				</view>
 			</view>
 
 			<!-- 排序筛选栏 -->
@@ -38,7 +48,7 @@
 				<view class="filter-item" :class="{ 'active': sortType === 1 }" @click="changeSort(1)">综合</view>
 				<view class="filter-item" :class="{ 'active': sortType === 2 }" @click="changeSort(2)">销量</view>
 				<view class="filter-item" :class="{ 'active': sortType === 3 }" @click="changeSort(3)">
-					价格
+					卷后价
 					<view class="price-arrows">
 						<text class="up" :class="{ 'hl': sortType === 3 && priceOrder === 'asc' }">▲</text>
 						<text class="down" :class="{ 'hl': sortType === 3 && priceOrder === 'desc' }">▼</text>
@@ -92,7 +102,22 @@
 				sortType: 1,
 				priceOrder: 'desc',
 				loading: false,
-				finished: false
+				finished: false,
+				subCurrentIndex: 0
+			}
+		},
+		computed: {
+			groupedSubCategories() {
+				const groups = [];
+				for (let i = 0; i < this.subCategories.length; i += 10) {
+					groups.push(this.subCategories.slice(i, i + 10));
+				}
+				return groups;
+			},
+			dotLeft() {
+				if (this.groupedSubCategories.length <= 1) return 0;
+				const maxIndex = this.groupedSubCategories.length - 1;
+				return (this.subCurrentIndex / maxIndex) * 50; // 50% 是滑块可移动的最大范围（取决于样式）
 			}
 		},
 		onLoad(options) {
@@ -193,6 +218,9 @@
 				this.subCategories = item.second || [];
 				this.getProducts(true);
 			},
+			onSubSwiperChange(e) {
+				this.subCurrentIndex = e.detail.current;
+			},
 			selectSub(sonId) {
 				this.currentSonId = sonId;
 				this.getProducts(true);
@@ -337,12 +365,17 @@
 		background: #ffffff;
 		margin: 20rpx;
 		border-radius: 16rpx;
-		padding: 20rpx 10rpx;
+		padding: 20rpx 0;
+	}
+
+	.sub-swiper {
+		height: 300rpx; /* 适应两行 2x5 布局 */
 	}
 
 	.sub-grid {
 		display: flex;
 		flex-wrap: wrap;
+		padding: 0 10rpx;
 	}
 
 	.sub-item {
@@ -364,6 +397,31 @@
 		color: #333;
 	}
 
+	.swiper-dot-wrap {
+		display: flex;
+		justify-content: center;
+		margin-top: 10rpx;
+	}
+
+	.swiper-dot-bar {
+		width: 60rpx;
+		height: 4rpx;
+		background: #eeeeee;
+		border-radius: 2rpx;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.swiper-dot-active {
+		position: absolute;
+		top: 0;
+		width: 30rpx;
+		height: 4rpx;
+		background: #ff416c;
+		border-radius: 2rpx;
+		transition: left 0.3s;
+	}
+
 	/* 筛选栏 */
 	.filter-bar {
 		display: flex;