Question

Swiper仅支持触摸移动来滑动任意数量的幻灯片，而不是每次滑动一次。我找到了一个解决方案，并想分享它。

在全球范围内建议使用布尔来防止一次滑动一次多次滑动。要仅滑动一次“滑动/滑动”，有必要启用“ touchMove”，因为我使用的是touchMove事件。必须将“阈值”设置得很高，以至于没有人可以使用它（例如10000左右）完成此设置后，无需实际滑动即可触发“ touchMove”事件。关于该解决方案的最好的事情是，通过启用和禁用“ allowTouchMove”，您还可以启用和禁用自定义触摸事件。休息很容易，如下面的代码所示。

let touchLimitiation = false;
let SliderConfig = {
   allowTouchMove: false,
   threshold: 10000,
   breakpoints: {
      992: {
         allowTouchMove: true,
      },
   },
   on: {
      touchMove: function(event) {
         // this will change the touch-move to slide only 1 slide pre swipe including the slide-animation
         if(event.movementX < -20 && !touchLimitiation) {
             this.slideNext();
             touchLimitiation = true;
         } else if(event.movementX > 20 && !touchLimitiation) {
             this.slidePrev();
             touchLimitiation = true;
         } else {
             touchLimitiation = false;
         }
      }
   }
new Swiper($(".swiper-container"), SliderConfig);

我希望这会有所帮助。（这是我的第一篇文章，因此...如果我可以做得更好，请告诉我。）

编辑：没关系，我犯了一个错误。 touchMove功能没用，它起作用的原因是触摸事件。所以...我想会一直在搜索...

编辑：好的，找到了解决方案：

let memoryStartX = 0,
    touchMoveTrigger = vwConverter($(window).width() < 576 ? 50 : 25),
    SliderConfig = {
    allowTouchMove: false,
    threshold: 10000,
    breakpoints: {
        992: {
            allowTouchMove: true,
        },
    },
    on: {
        touchMove: function(event) {
            let startX = this.touches.startX,
                currentX = this.touches.currentX;

            if(startX > currentX && startX - currentX >= touchMoveTrigger && memoryStartX !== startX) {
                this.slideNext();
                memoryStartX = startX;
            } else if(startX < currentX && currentX - startX >= touchMoveTrigger && memoryStartX !== startX) {
                this.slidePrev();
                memoryStartX = startX;
            }
        },
        resize: function() {
            touchMoveTrigger = vwConverter($(window).width() < 576 ? 50 : 25);
        },
     };
new Swiper($(".swiper-container"), SliderConfig);

function vwConverter(vw) {
    return Math.round($(window).width() * (vw / 100));
}

我的错误是：我使用了一个未定义的var（我不知道为什么会发生，我对其进行了测试...），该解决方案不是使用来自事件的信息，而是使用滑块本身的信息。希望这会有所帮助。

如何将“滑动时的触摸”设置为每个TouchMove仅滑动1张幻灯片？

0 个答案: