【前端】一个实现页面下拉刷新的js代码

然仔 2019-11-23 2613

很多网站都需要下拉刷新功能,这里分享一个下拉刷新js代码。

//放在</body>后面
 <script type="text/javascript" charset="utf-8">
//下拉刷新  
    document.body.addEventListener("touchstart", touchStart, false);
    document.body.addEventListener("touchmove", touchMove, false);
    document.body.addEventListener("touchend", touchEnd, false);
    var canefresh = false;
    function touchStart(e) {
      if ($(window).scrollTop() <= 0) {
        canefresh = true;
      }
      var touch = e.touches[0];
      startY = touch.pageY;
    }
    function touchMove(e) {
      //	e.preventDefault();
      if (!canefresh) {
        return;
      }
      var touch = e.touches[0];
      endY = touch.pageY;
      $('body').css('padding-top', endY - startY);
    }
    function touchEnd(e) {
      if (!canefresh) {
        return;
      }
      console.log(endY - startY);
      if ((endY - startY) > 50) {
        location.reload();
      }
      $('body').css('padding-top', '');
      canefresh = false;
    }
  </script>
最新回复 (0)
发新帖