Swiper transitionEnd触发后回退到上一活动幻灯片问题求解

出现幻灯片不切换、拖拽结束回弹到第一页的核心原因是逻辑冲突：

• 你在sliderMove回调里手动调用切页方法时，Swiper默认的内置拖拽逻辑仍在正常执行，会持续计算拖拽位移，在拖拽结束后按照内置规则判定目标索引，直接覆盖你手动修改的activeIndex
• 你调用slideNext(0, false)时第二个参数设为false表示跳过过渡动画，Swiper内部状态没有完成同步，后续transitionEnd回调执行内置重置逻辑时，就会把索引拉回初始判定的第一页。你主动抛错阻断了事件链后续执行，刚好跳过了重置步骤，但这种方式会打断JS正常执行流，存在不可预知的隐患。

首先关闭Swiper默认的跟手拖拽逻辑，从根源避免内置逻辑和自定义逻辑冲突；其次不要每次鼠标移动都触发切页，改为累计拖拽位移，当位移达到对应阈值时再触发切页，刚好匹配「拖拽距离等于wrapper容器整个高度时遍历所有幻灯片」的需求，完整代码如下：

function longDrag({ swiper, extendParams, on }) {
  // 支持自定义配置
  extendParams({
    longDrag: {
      thresholdRatio: 1, // 默认真实拖拽距离和容器高度1:1时遍历完全部幻灯片
    }
  })

  let dragStartY = 0
  let accumulatedOffset = 0
  const wrapperHeight = swiper.wrapperEl.clientHeight
  // 计算每切一页需要的拖拽距离：总容器高度 / (总页数-1)，保证拖满总高度刚好走完所有页
  const perSlideDistance = wrapperHeight / (swiper.slides.length - 1)

  // 关闭Swiper内置拖拽逻辑，避免内置逻辑覆盖自定义切页操作
  swiper.params.allowTouchMove = false

  on('touchStart', (swiper, e) => {
    if (!swiper.params.debugger) return
    // 记录拖拽起始坐标
    dragStartY = e.type.includes('mouse') ? e.clientY : e.touches[0].clientY
    accumulatedOffset = 0
  })

  on('touchMove', (swiper, e) => {
    if (!swiper.params.debugger) return
    const currentY = e.type.includes('mouse') ? e.clientY : e.touches[0].clientY
    // 计算本次移动的偏移量，向上拖拽为正、向下拖拽为负
    const deltaY = dragStartY - currentY
    accumulatedOffset += deltaY
    dragStartY = currentY

    // 累计偏移达到单页阈值就触发切页，支持一次拖拽跨多页
    while (Math.abs(accumulatedOffset) >= perSlideDistance) {
      if (accumulatedOffset > 0) {
        if (swiper.activeIndex < swiper.slides.length - 1) {
          swiper.slideNext(0, false)
        }
        accumulatedOffset -= perSlideDistance
      } else {
        if (swiper.activeIndex > 0) {
          swiper.slidePrev(0, false)
        }
        accumulatedOffset += perSlideDistance
      }
    }
  })

  on('slideChange', () => {
    if (!swiper.params.debugger) return
    console.log(
      'slideChange',
      swiper.previousIndex,
      '->',
      swiper.activeIndex
    );
  });
}

• 不需要靠抛错阻断事件，关闭内置allowTouchMove后，Swiper不会再执行默认的拖拽判定和索引重置逻辑，从根源解决回弹问题
• 累计位移的计算方式，保证拖拽灵敏度和需求完全匹配，不会出现轻微移动就切页的问题
• 代码同时兼容鼠标拖拽和移动端触摸操作，增加了索引边界判断，不会出现切页超出幻灯片范围的问题
• 使用时直接将该函数传入Swiper实例的plugins配置项即可，不需要额外修改其他参数

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