javascript - 向左/向右滑动查看网页

Question

我有一系列枚举的网页，目前每个页面上都有一个向左和向右箭头图标，用于导航到该系列中的上一页/下一页。

我的问题:实现向左/向右滑动手势以执行相同操作的最简单(!)方法是什么？ (没有其他手势 - 请不要复杂的解决方案，我是一个该死的新手!)

提前非常感谢您的回答!

Answer 1

只需存储用户触摸的第一个点:

 var start = null;
 window.addEventListener("touchstart",function(event){
   if(event.touches.length === 1){
      //just one finger touched
      start = event.touches.item(0).clientX;
    }else{
      //a second finger hit the screen, abort the touch
      start = null;
    }
  });

然后，如果手指离开屏幕，检查偏移量是否高于某个值:

 window.addEventListener("touchend",function(event){
    var offset = 100;//at least 100px are a swipe
    if(start){
      //the only finger that hit the screen left it
      var end = event.changedTouches.item(0).clientX;

      if(end > start + offset){
       //a left -> right swipe
      }
      if(end < start - offset ){
       //a right -> left swipe
      }
    }
  });

您可以添加额外的检查，例如如果 delta y ( clientY) 保持在某一数值以下，或者触摸移动仅朝一个方向进行。然而，这是可选的，取决于您是否需要将其与其他滑动操作区分开来。您还可以根据页面宽度进行所需的滑动，例如:

var offset = window.clientX * 0.9; // the swipe mist be 90% of the windows size

Test it