✨ feat: 产品详情页，图片切换组件显示逻辑修改

李琛意见

 <!--
 <!--
  * @Date: 2024-09-27 19:49:03
  * @Date: 2024-09-27 19:49:03
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-24 12:47:42
+ * @LastEditTime: 2024-10-28 15:47:54
  * @FilePath: /hager/src/components/hagerCarousel.vue
  * @FilePath: /hager/src/components/hagerCarousel.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -59,7 +59,7 @@ export default {
     return {
     return {
       selectedImage: 0, // 当前选中的图片索引
       selectedImage: 0, // 当前选中的图片索引
       startIndex: 0,    // 当前显示的缩略图起始索引
       startIndex: 0,    // 当前显示的缩略图起始索引
-      thumbnailsToShow: 4, // 每次显示4个缩略图
+      thumbnailsToShow: 3, // 每次显示4个缩略图
       isTransitioning: false, // 控制大图的切换动画
       isTransitioning: false, // 控制大图的切换动画
     };
     };
   },
   },
@@ -95,22 +95,30 @@ export default {
     ensureVisibleThumbnail() {
     ensureVisibleThumbnail() {
       if (this.selectedImage < this.startIndex) {
       if (this.selectedImage < this.startIndex) {
         // 如果选中的缩略图在当前显示范围的上方，则向上滚动
         // 如果选中的缩略图在当前显示范围的上方，则向上滚动
-        this.startIndex = this.selectedImage;
+        this.startIndex = this.selectedImage - this.thumbnailsToShow + 1;
       } else if (this.selectedImage > this.endIndex) {
       } else if (this.selectedImage > this.endIndex) {
         // 如果选中的缩略图在当前显示范围的下方，则向下滚动
         // 如果选中的缩略图在当前显示范围的下方，则向下滚动
-        this.startIndex = this.selectedImage - this.thumbnailsToShow + 1;
+        this.startIndex = this.selectedImage - this.thumbnailsToShow + 3;
       }
       }
     },
     },
     // 切换到下一张图片
     // 切换到下一张图片
     nextImage() {
     nextImage() {
-      if (this.selectedImage < this.images.length - 1) {
-        this.selectImage(this.selectedImage + 1);
+      // if (this.selectedImage < this.images.length - 1) {
+      //   this.selectImage(this.selectedImage + 1);
+      // }
+      if (this.startIndex < this.images.length - 3) {
+        this.startIndex += 3
+        this.selectImage(this.startIndex);
       }
       }
     },
     },
     // 切换到上一张图片
     // 切换到上一张图片
     prevImage() {
     prevImage() {
-      if (this.selectedImage > 0) {
-        this.selectImage(this.selectedImage - 1);
+      // if (this.selectedImage > 0) {
+        // this.selectImage(this.selectedImage - 1);
+      // }
+      if (this.startIndex > 0) {
+        this.startIndex -= 3;
+        this.selectImage(this.startIndex);
       }
       }
     }
     }
   },
   },
@@ -143,7 +151,7 @@ export default {
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
     align-items: center;
     align-items: center;
-    max-height: 220px; /* 限制缩略图容器的高度 */
+    max-height: 190px; /* 限制缩略图容器的高度 */
     overflow: hidden;
     overflow: hidden;
     position: relative; /* 为缩略图滚动效果提供基础 */
     position: relative; /* 为缩略图滚动效果提供基础 */
   }
   }