Swiper垂直模式下触摸板滑动多页问题的修复咨询

针对垂直模式下触摸板连续滚动导致一次跳多张幻灯片的问题，可通过以下几种方案解决：

• 调整mousewheel配置参数
  触摸板滚动会产生连续的小幅度滚动事件，通过设置阈值过滤这类事件，同时强制限制垂直轴滚动，避免误触发：

const swiper = new Swiper('.swiper', {
  direction: 'vertical',
  mousewheel: {
    threshold: 100, // 根据触摸板实际滚动幅度调整，建议在50-200区间测试
    forceToAxis: true, // 强制限制在垂直方向触发滚动
    sensitivity: 1
  },
  slidesPerView: 1,
  spaceBetween: 30,
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  }
});

• 临时禁用滚动防止连续触发
  如果阈值调整后仍有连续切换问题，可在幻灯片切换开始时禁用mousewheel，完成后延迟恢复：

const swiper = new Swiper('.swiper', {
  direction: 'vertical',
  mousewheel: true,
  slidesPerView: 1,
  spaceBetween: 30,
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
  on: {
    slideChangeStart() {
      this.mousewheel.disable();
    },
    slideChangeEnd() {
      // 延迟时间可根据幻灯片切换动画时长调整
      setTimeout(() => this.mousewheel.enable(), 500);
    }
  }
});

• 优化触摸模拟参数
  部分触摸板会被识别为触摸事件，调整触摸相关参数可改善滑动响应：

const swiper = new Swiper('.swiper', {
  direction: 'vertical',
  mousewheel: true,
  touchRatio: 2, // 提高触摸灵敏度，小幅度滑动即可触发切换
  simulateTouch: true,
  slidesPerView: 1,
  spaceBetween: 30,
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  }
});

建议优先测试第一种方案，通过调整threshold值找到适配触摸板的最佳参数，大部分场景下这个配置就能解决问题。

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