移动端touch事件--手指的滑动事件

参考文案：https://www.cnblogs.com/yangmengsheng/p/5973487.html

https://www.cnblogs.com/puyongsong/p/5983324.html

 

实践：

滑动翻页：

/*
  滑动翻页
*/
function moveFilp(obj){
  var mybody = $('body')[0];
  var h = document.documentElement.clientHeight;
  mybody.style.height = h + 'px';//确保body高度不为0

  // 页面初始化
  var page = obj.page;//获取页面class/id
  var length = $(page).length;
  var pageTop = 0;
  for(var i = 1 ; i < length; i ++){
    $(page).eq(i).css("top",h * i + "px");
  }

  //滑动处理
  var startX, startY, moveEndX, moveEndY, X, Y; 
  var gg = true; // touchmove处于一直触发状态 需要上锁
  mybody.addEventListener('touchstart', function(e) {
    e.preventDefault();
    startX = e.touches[0].pageX;
    startY = e.touches[0].pageY;
  }, false);
  mybody.addEventListener('touchmove', function(e) {
    e.preventDefault();
    moveEndX = e.changedTouches[0].pageX;
    moveEndY = e.changedTouches[0].pageY;
    X = moveEndX - startX;
    Y = moveEndY - startY;
    if(Math.abs(Y) > Math.abs(X) && Y > 0 && gg) {
      flip("bottom");
    }else if(Math.abs(Y) > Math.abs(X) && Y < 0 && gg) {
      flip("top");
    }
  });

  // 翻页处理
  var flip = function(fx){
    gg = false;
    var f = fx == "top" ? -1 : 1;
    for(var i = 0 ; i < length; i ++){ 
      var top = $(page).eq(i).css("top")
      pageTop = parseInt(top.substr(0,top.length-2));
      $(page).eq(i).animate({top: pageTop + f * h + "px"},function(){ gg = true;});
    }
  }
}