美文网首页
移动端H5上划下拉

移动端H5上划下拉

作者: 深吸一口气 | 来源:发表于2021-08-05 16:50 被阅读0次
let start_x = start_y = end_x = end_y = 0;
let body = document.getElementByTagName("body")[0];

body.addEventListener("touchstart", function(event){
  let touch = event.targetTouches[0];
  start_x = touch.pageX;
  start_y = touch.pageY;
})

body.addEventListenner("touchmove", function(event){
  let touch = event.targetTouches[0];
  end_x = touch.pageX;
  end_y = touch.pageY;
})

body.addEventListenner("touchend", function(event){
  let move_distance_y = end_y - start_y;
  if(move_distance_y >= 100){
    // 下拉操作
  }
  if(move_distance_y <= -100){
    // 上划操作
  }
  // 重置坐标
  start_x = start_y = end_x = end_y = 0;
})

相关文章

网友评论

      本文标题:移动端H5上划下拉

      本文链接:https://www.haomeiwen.com/subject/aqomvltx.html