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;