标签：jQuery function documentElement disY clientHeight 上拉 scrollTop document 加载

• 上拉刷新的实现：

• //------------------------下拉刷新-------------------------------
      //定义的全局变量
      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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。