原生jquery实现移动端滑动分页

一、实现原理

• a=152 代表dom顶部距离page顶部的距离
• b=800 代表dom的高度
• d 表示滚动条的滚动的高度，此时没有滚动，即d=0
• c 表示scrollerHeight 即最外层容器的高度
• offset 可以自定义设定，表示距离底部多少时请求下一页数据。

再来看图二：

此时滚动条向下滚动了50
a=152
b=800
c=852
d=50
如果我们设定this.offset=55
计算公式：a-d+b-c = 152-50+800-852=50 < 55
所以此时可以触发加载新内容.

二、原生 js + jq 代码

/* 分页接口 */
function getData(page, limit, type) {
    
    
  // 这里也就是原生Ajax，只不过我封装了一下
  Util.Fetch({
    
    
    url: Util.OPENAPI + '/customer/v1.0/cabinet/get-order-page',
    data: {
    
     currentPage: page, pageSize: limit },
    cbOk: function (res) {
    
    
      var list = res.responseBody.data.list

      if (!list) {
    
    
        return false
      }
      if (list.length==0) {
    
    
        Util.toast("暂无数据！");
        return;
      } else {
    
    

        for (i = 0; i < list.length; i++) {
    
    
          var item = list[i]
          // 把定义好的模板放在循环中列表中，依次追加到页面 dom元素上。
          var template = `
        <div class="content">
        <div class="content_top">
        <span>${
      
      item.location}</span>
        <span>${
      
      item.clearWeight}kg</span>
        </div>
        <div class="content_bottom">${
      
      item.createdTime}</div>
        </div>
        `
          $('#list').append(template)
        }


        
        if (list.length < limit) {
    
    
          // Util.toast('已到底部！');
          window.isEnd = true;
          return;
        }
      }
    },
    cbErr: function () {
    
    
      Util.toast("加载失败，请检查网络...");
    }
  })
},
/* 分页方法 */
function pageList() {
    
    
  var _this = this
  //判断什么时候加载更多
  var type = 1; //第一页
  var limit = 10;  //一页显示几条
  _this.getData(1, limit, type);  //初始化
  var winH = $(window).height(); //页面可视区域高度
  var loading = false;  //状态标记 是否要加载
  window.page = 2;               //page从2加开始
  window.isEnd = false; //是否加载结束状态
  $(window).scroll(function () {
    
    
    var scrollT = $(window).scrollTop(); //滚动条top
    var pageH = $(document.body).height();//body高度
    var aa = pageH - winH - scrollT;

    if (isEnd) {
    
           //判断是否到底
      return;
    }
    if (isEnd == false && aa < 50) {
    
    
      if (loading) return;
      _this.getData(page, limit, type);
      window.page++;
      loading = true;
    } else {
    
    
      loading = false;
    }
  });
},