基于jQuery实现下拉刷新上拉加载

• 上拉刷新的实现：

• //------------------------下拉刷新-------------------------------
      //定义的全局变量
      var disY, startY, endY;
      //触摸事件开始时触发
      $('.scroll').on('touchstart', function (e) {
          startY = e.changedTouches[0].pageY;
      });
      //触摸事件移动中时触发
      $('.scroll').on('touchmove', function (e) {
          endY = e.changedTouches[0].pageY;
          disY = endY - startY;
          if (disY > 30) {
              $('.status').css({
                  display: 'block',
                  height: disY + 'px',
              });
          }
      });
      //触摸事件结束时触发
      $('.scroll').on('touchend', function (e) {
          endY = e.changedTouches[0].pageY;
          disY = endY - startY;
          if (disY > 72) {
              //定义一个定时器，返回下拉到一定的高度
              var timer = setInterval(function () {
                  disY -= 13;
                  if (disY <= 60) {
                      $('.status').css({
                          height: 52 + 'px',
                      });
                      clearInterval(timer);
                      refresh();
                  }
                  $('.status').css({
                      height: disY + 'px',
                  });
              }, 75);
          }
      });
      //请求刷新数据
      function refresh() {
          var t = setTimeout(function () {
              for (var i = 0; i < 13; i++) {
                  $('.scroll ul').append('<li>' + '添加的数据:' + parseInt(i + 1) + '</li>');
              }
              $('.status').css({
                  display: 'none',
                  height:0
              });
              clearTimeout(t)
          }, 3000);
      }

   

• 下拉加载的实现：

•  1 //--------------上拉加载更多---------------
   2     //获取滚动条当前的位置
   3     function getScrollTop() {
   4         var scrollTop = 0;
   5         if (document.documentElement && document.documentElement.scrollTop) {
   6             scrollTop = document.documentElement.scrollTop;
   7         } else if (document.body) {
   8             scrollTop = document.body.scrollTop;
   9         }
  10         return scrollTop;
  11     }
  12  
  13     //获取当前可视范围的高度
  14     function getClientHeight() {
  15         var clientHeight = 0;
  16         if (document.body.clientHeight && document.documentElement.clientHeight) {
  17             clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
  18         } else {
  19             clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
  20         }
  21         return clientHeight;
  22     }
  23  
  24     //获取文档完整的高度
  25     function getScrollHeight() {
  26         return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
  27     }
  28  
  29     //滚动事件触发
  30     window.onscroll = function () {
  31         if (getScrollTop() + getClientHeight() === getScrollHeight()) {
  32             console.log('在这里加载数据咯！');
  33         }
  34     }

   

标签：jQuery,function,documentElement,disY,clientHeight,上拉,scrollTop,document,加载
来源： https://www.cnblogs.com/itJiao33/p/14178099.html