html 移动端使用dropload.js 实现下拉刷新，上拉加载更多

1、引入 dropload.js,dropload.css

  <link rel="stylesheet" href="/static/css/dropload.css">
  <script src="/static/js/jquery-1.11.2.min.js"></script>
  <script src="/static/js/dropload.js"></script>

2.在js 中调用

<div id="dataDiv">
    <ul id="dataShow">
    </ul>
</div>

    //定义初始页码
    var pageNumber = 1;
    //是否有更多数据表示
    var down = null;
    $(function () {
       //先清空要填充的元素块
      $("#dataShow").empty();
        //初始化自己的ajax 方法，组装元素，放到 #dataShow 中
      init();
        //定义dropload
      $('#dataDiv').dropload({
        scrollArea : window,
        domDown:{
        //自定义显示
          domNoData:"<div class='dropload-noData'>没有更多数据了</div>"
        },
        //上拉加载更多
        loadDownFn : function(me){
          pageNumber = pageNumber +1;
          init();
          if(down == "no"){
            me.lock('down');
            me.noData();
          }
          me.resetload();
        },
        //下拉刷新
        loadUpFn: function (me) {
          pageNumber = 1;
          $("#dataShow").empty();
          init();
          me.resetload();
        }
      });
    });

    function init() {
      var showDiv = $("#dataShow");
      $.ajax({
        url: "自己的路径",
        method: "get",
        //必须修改为同步请求
        async: false,
        data: {//自己的参数},
        success:function(res){
          var data = res.records;
          if(data.length == 0){
            down = "no";
          }
          for (var i = 0; i < data.length; i++) {
            //组装自己的数据
          }
        }
      })
    }

3、后台 controller 按照 page 分页的逻辑写就可以了

 

PS ： 注意事项

dropload.js 中 50行 代码  

autoLoad : true

改为    false,不然当页面初始数据少的时候，会一直触发请求，导致页面卡死。改成false之后，阻止了自动刷新。