美文网首页
移动端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