Swiper.js非loop模式点击导航按钮时onSlideChange触发两次求助

针对你遇到的React18 + Swiper8.4.6环境下，loop关闭时点击首尾组导航按钮导致onSlideChange触发两次、跳过中间组的问题，提供以下几种可行方案：

方案一：改用onSlideChangeEnd事件 #

onSlideChange会在滑动开始时触发，边界切换时Swiper会先触发一次过渡索引的变化，再修正到最终边界索引，导致两次回调。而onSlideChangeEnd是在滑动动画完全结束后触发，只会执行一次，直接替换即可解决：

<SwiperReact
  onSwiper={(swiper: SwiperCore) => setSwiper(swiper)}
  onSlideChangeEnd={(swiper: SwiperCore) => handleChangeIndex(swiper)} // 替换原onSlideChange
  {...swiperOption}
>
  {SlideContents}
</SwiperReact>

方案二：给回调函数加防抖处理 #

如果业务逻辑必须依赖onSlideChange事件，可以通过防抖过滤短时间内的重复触发，确保只处理最后一次有效索引：

import { debounce } from 'lodash';
import { useCallback } from 'react';

// 组件内部定义防抖后的处理函数
const debouncedHandleChangeIndex = useCallback(debounce((swiper: SwiperCore) => {
  const newIndex = Math.floor(swiper.activeIndex / 4);
  setCurrentIndex(newIndex);
  console.log('newIndex', newIndex);
}, 100), []); // 延迟时间可根据滑动动画时长调整

// 使用防抖后的函数作为回调
<SwiperReact
  onSwiper={(swiper: SwiperCore) => setSwiper(swiper)}
  onSlideChange={debouncedHandleChangeIndex}
  {...swiperOption}
>
  {SlideContents}
</SwiperReact>

方案三：手动过滤过渡态无效索引 #

在回调中判断当前activeIndex是否为过渡中的临时值（比如点击最后一组next时，Swiper会先跳到总slide数的索引，再修正回最后一个有效索引），过滤掉这些无效触发：

const handleChangeIndex = (props: SwiperCore) => {
  const totalSlides = props.slides.length;
  const maxGroupIndex = Math.floor((totalSlides - 1) / 4);
  const targetIndex = props.activeIndex;

  // 过滤过渡态的无效索引
  if (targetIndex === totalSlides || targetIndex < 0) return;

  const newIndex = Math.floor(targetIndex / 4);
  // 确保组索引不超出范围
  const finalIndex = Math.max(0, Math.min(newIndex, maxGroupIndex));
  setCurrentIndex(finalIndex);
  console.log('newIndex', finalIndex);
};

额外注意事项 #

检查你的Swiper配置：确保slidesPerGroup和对应断点下的slidesPerView数值一致（你当前768px以上配置为4和4，是合理的），避免分组与显示数量不匹配引发的异常切换逻辑。

内容的提问来源于stack exchange，提问作者a_lady_on_fire