移动端下拉插件的使用-----dropload

定义一个div.no_data当无数据的时候进行显示,在定义一个div.data_box承载拉去回来的内容

<div class='no_data'>
    <p>暂无任何记录</p>
</div>
<div class='data_box'>
    <table>
          <thead>
                  <th>表头一</th>
                  <th>表头一</th>
          </thead>
          <tbody> 
                    <td>内容一</td>
                    <td>内容一</td>
          </tbody>
    </table>
</div>

下拉相关的逻辑代码

var now_page = 0, pageSize = 10;
    function do_ajax(){
       $.ajax({
          url :   '/report/get-activity-list',
          method :  'post',
          data : {
               'name' : '必传参数一',
                'age' :  '必传参数二'
          },
          success : function(res){
                 set_table();
          }  
     })
}

//成功拉去到数据后进行表格填充

var str = '', totalPage=1;
function set_table(res){
    if(res.data.count!=0){
        $('.data_box').show();
        totalPage = Math.ceil(res.data.count/pageSize);
        res.data.data.forEach(function (i,index) {
            str += '<tr>';
            str += '<td>'+formatDateTime(i['created_at']*1000)+'</td>';
            str += '<td class="status_ok">转账成功</td>';
            str += '</tr>';
        });
        $("#transferBox").html(str);
    }else{
        $('.no_res').show();
        $('.data_res_box').hide();
        //$("#transferBox").html('<tr><td colspan="4">暂无记录</td></tr>');
    }
}

下拉时触发的函数

 function loadData(){
    $('.dropload-down').remove();
    $('#transferBox').html('');
    str='';
    now_page = 0;
    $('.data_res_box').dropload({
        scrollArea : window,
        domDown:{
            domNoData:"<div class='dropload-noData'>没有更多数据了</div>"
        },
        loadDownFn : function(me){
            if(now_page < totalPage){
                now_page++;
                do_ajax();
            }else{
                // 锁定
                me.lock();
                // 无数据
                me.noData();
            }

            setTimeout(function(){
                // 每次数据插入，必须重置
                me.resetload();
            },1000);
        }
    })
}