diff --git a/pages/category/category.vue b/pages/category/category.vue
index 4542964..a14c726 100644
--- a/pages/category/category.vue
+++ b/pages/category/category.vue
@@ -23,12 +23,22 @@
-
+
-
-
-
- {{ sub.cate_name.trim() }}
+
+
+
+
+
+ {{ sub.cate_name.trim() }}
+
+
+
+
+
+
+
+
@@ -38,7 +48,7 @@
综合
销量
- 价格
+ 卷后价
▲
▼
@@ -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;