jsite/t10015
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

美化产品详情页主图导航图标

Browse Source
This commit is contained in:
jingrow 2025-08-24 20:44:06 +08:00
parent f161eda997
commit 01f3c85526
1 changed files with 54 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
components/products/ProductImageGallery.jsx
View File

@ -35,6 +35,58 @@ const ProductImageGallery = ({ data }) => {
const mainImageIndex = getMainImageIndex(); const mainImageIndex = getMainImageIndex();
const currentImage = data.attachments[currentImageIndex]?.file_url || data.attachments[0]?.file_url; 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(() => { useEffect(() => {
setCurrentImageIndex(mainImageIndex); setCurrentImageIndex(mainImageIndex);
@ -57,10 +109,12 @@ const ProductImageGallery = ({ data }) => {
case 'Home': case 'Home':
event.preventDefault(); event.preventDefault();
setCurrentImageIndex(0); setCurrentImageIndex(0);
setTimeout(() => scrollThumbnailToIndex(0), 100);
break; break;
case 'End': case 'End':
event.preventDefault(); event.preventDefault();
setCurrentImageIndex(data.attachments.length - 1); setCurrentImageIndex(data.attachments.length - 1);
setTimeout(() => scrollThumbnailToIndex(data.attachments.length - 1), 100);
break; break;
default: default:
break; break;
@ -75,61 +129,7 @@ const ProductImageGallery = ({ data }) => {
}; };
}, [data.attachments.length]); }, [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 = () => { // const goToPrevThumbs = () => {