diff --git a/components/products/ProductImageGallery.jsx b/components/products/ProductImageGallery.jsx index d99abc9..4e8dd78 100644 --- a/components/products/ProductImageGallery.jsx +++ b/components/products/ProductImageGallery.jsx @@ -35,6 +35,58 @@ const ProductImageGallery = ({ data }) => { const mainImageIndex = getMainImageIndex(); const currentImage = data.attachments[currentImageIndex]?.file_url || data.attachments[0]?.file_url; + // 专门的缩略图滚动函数 + const scrollThumbnailToIndex = (index) => { + console.log('滚动缩略图到索引:', index); // 调试信息 + + if (thumbsSwiperRef.current && thumbsSwiperRef.current.swiper) { + const swiper = thumbsSwiperRef.current.swiper; + console.log('Swiper实例存在,开始滚动'); // 调试信息 + + // 使用更简单的方法:直接滚动到指定索引 + try { + swiper.slideTo(index, 300); + console.log('滚动成功,目标索引:', index); + } catch (error) { + console.error('滚动失败:', error); + } + } else { + console.log('Swiper实例不存在,thumbsSwiperRef:', thumbsSwiperRef.current); + } + }; + + const changeMainImage = (direction) => { + console.log('changeMainImage 被调用,方向:', direction); // 调试信息 + + if (data.attachments.length <= 1) return; + + let newIndex; + if (direction === 'next') { + newIndex = (currentImageIndex + 1) % data.attachments.length; + } else { + newIndex = (currentImageIndex - 1 + data.attachments.length) % data.attachments.length; + } + + console.log('新的索引:', newIndex, '当前索引:', currentImageIndex); // 调试信息 + + setCurrentImageIndex(newIndex); + + // 自动滚动缩略图到对应位置 + setTimeout(() => { + console.log('开始执行滚动,索引:', newIndex); // 调试信息 + scrollThumbnailToIndex(newIndex); + }, 100); + }; + + const changeMainImageByIndex = (index) => { + setCurrentImageIndex(index); + + // 智能滚动缩略图到可见区域 + setTimeout(() => { + scrollThumbnailToIndex(index); + }, 100); + }; + // 初始化当前索引为主图索引 useEffect(() => { setCurrentImageIndex(mainImageIndex); @@ -57,10 +109,12 @@ const ProductImageGallery = ({ data }) => { case 'Home': event.preventDefault(); setCurrentImageIndex(0); + setTimeout(() => scrollThumbnailToIndex(0), 100); break; case 'End': event.preventDefault(); setCurrentImageIndex(data.attachments.length - 1); + setTimeout(() => scrollThumbnailToIndex(data.attachments.length - 1), 100); break; default: break; @@ -75,61 +129,7 @@ const ProductImageGallery = ({ data }) => { }; }, [data.attachments.length]); - const changeMainImage = (direction) => { - if (data.attachments.length <= 1) return; - - if (direction === 'next') { - setCurrentImageIndex((prev) => (prev + 1) % data.attachments.length); - } else { - setCurrentImageIndex((prev) => (prev - 1 + data.attachments.length) % data.attachments.length); - } - }; - const changeMainImageByIndex = (index) => { - setCurrentImageIndex(index); - - // 智能滚动缩略图到可见区域 - if (thumbsSwiperRef.current && thumbsSwiperRef.current.swiper) { - const swiper = thumbsSwiperRef.current.swiper; - const slideIndex = index; - - // 计算目标滚动位置 - const slideWidth = 64; // 64px 缩略图宽度 - const spaceBetween = 16; // 16px 间距 - const totalSlideWidth = slideWidth + spaceBetween; - - // 获取当前可见的slides数量 - const visibleSlides = swiper.params.slidesPerView; - - // 计算当前滚动位置 - const currentTranslate = swiper.translate; - const currentSlideIndex = Math.round(Math.abs(currentTranslate) / totalSlideWidth); - - // 判断需要向左还是向右滚动 - let targetSlideIndex; - - if (slideIndex < currentSlideIndex) { - // 向左滚动:让选中的缩略图显示在左侧 - targetSlideIndex = Math.max(0, slideIndex - 1); - } else if (slideIndex >= currentSlideIndex + visibleSlides) { - // 向右滚动:让选中的缩略图显示在右侧 - targetSlideIndex = slideIndex - visibleSlides + 1; - } else { - // 当前缩略图已经在可见区域内,不需要滚动 - return; - } - - // 计算目标滚动位置 - const targetTranslate = targetSlideIndex * totalSlideWidth; - - // 确保不超出边界 - const maxTranslate = swiper.maxTranslate(); - const finalTranslate = Math.max(0, Math.min(targetTranslate, maxTranslate)); - - // 平滑滚动到目标位置 - swiper.slideTo(Math.round(finalTranslate / totalSlideWidth), 300); - } - }; // 缩略图导航控制 - 移除这些函数,不再需要 // const goToPrevThumbs = () => {