向左/向右滑动即可浏览网页

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
      }
    }
  });

您可能会添加其他检查，例如，增量（clientY）是否保持在一定数量以下，或者触摸移动是否只是朝一个方向移动。但是，那是可选的，取决于您是否需要将其与另一个滑动操作区分开。您还可以使所需的滑动依赖于页面宽度，例如：

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

测试一下