dropload.js插件下拉刷新和上拉加载使用详解

**基本代码结构**//#content为某个div的id var dropload = $('#content').dropload({ //scrollArea很关键，要不然加载更多不起作用 scrollArea : window, domUp : {  domClass : 'dropload-up',  domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',  domUpdate : '<div class="dropload-update">↑释放更新</div>',  domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>' }, domDown : {  domClass : 'dropload-down',  domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',  domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',  domNoData : '<div class="dropload-noData">暂无数据</div>'  }, loadUpFn : function(me){  //下拉刷新需要调用的函数  alert("下拉刷新需要调用的函数");  //重置下拉刷新  me.resetload(); }, loadDownFn : function(me){  //上拉加载更多需要调用的函数  alert("上拉加载更多需要调用的函数");  //定时器函数,为了看出上拉加载更多效果   setTimeout(function(){   // 每次数据加载完，必须重置    me.resetload();   },1000);   } }); 

<script>$(function(){ // 页数 var page = 0; // 每页展示5个 var size = 5; // dropload调用 $('.content').dropload({ scrollArea : window, loadDownFn : function(me){  page++;  // 拼接HTML  var result = '';  $.ajax({  type: 'GET',  url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,//配合后台接口  dataType: 'json',  success: function(data){   var arrLen = data.length;   if(arrLen > 0){   for(var i=0; i<arrLen; i++){    result += '<a class="item opacity" href="'+data[i].link+'">'      +'<img src="'+data[i].pic+'" alt="">'      +'<h3>'+data[i].title+'</h3>'      +'<span class="date">'+data[i].date+'</span>'     +'</a>';   }   // 如果没有数据   }else{   // 锁定   me.lock();   // 无数据   me.noData();   }   // 为了测试，延迟1秒加载   setTimeout(function(){   // 插入数据到页面，放到最后面   $('.lists').append(result);   // 每次数据插入，必须重置   me.resetload();   },1000);  },  error: function(xhr, type){   alert('Ajax error!');   // 即使加载出错，也得重置   me.resetload();  }  }); } });});</script>

<script>$(function(){ // 页数 var page = 0; // 每页展示10个 var size = 10; // dropload $('.content').dropload({ scrollArea : window, domUp : {  domClass : 'dropload-up',  domRefresh : '<div class="dropload-refresh">↓下拉刷新-自定义内容</div>',  domUpdate : '<div class="dropload-update">↑释放更新-自定义内容</div>',  domLoad : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>' }, domDown : {  domClass : 'dropload-down',  domRefresh : '<div class="dropload-refresh">↑上拉加载更多-自定义内容</div>',  domLoad : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>',  domNoData : '<div class="dropload-noData">暂无数据-自定义内容</div>' }, loadUpFn : function(me){  $.ajax({  type: 'GET',  url: 'json/update.json',  dataType: 'json',  success: function(data){   var result = '';   for(var i = 0; i < data.lists.length; i++){   result += '<a class="item opacity" href="'+data.lists[i].link+'">'     +'<img src="'+data.lists[i].pic+'" alt="">'     +'<h3>'+data.lists[i].title+'</h3>'     +'<span class="date">'+data.lists[i].date+'</span>'     +'</a>';   }   // 为了测试，延迟1秒加载   setTimeout(function(){   $('.lists').html(result);   // 每次数据加载完，必须重置   me.resetload();   // 重置页数，重新获取loadDownFn的数据   page = 0;   // 解锁loadDownFn里锁定的情况   me.unlock();   me.noData(false);   },1000);  },  error: function(xhr, type){   alert('Ajax error!');   // 即使加载出错，也得重置   me.resetload();  }  }); }, loadDownFn : function(me){  page++;  // 拼接HTML  var result = '';  $.ajax({  type: 'GET',  url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,  dataType: 'json',  success: function(data){   var arrLen = data.length;   if(arrLen > 0){   for(var i=0; i<arrLen; i++){    result += '<a class="item opacity" href="'+data[i].link+'">'      +'<img src="'+data[i].pic+'" alt="">'      +'<h3>'+data[i].title+'</h3>'      +'<span class="date">'+data[i].date+'</span>'     +'</a>';   }   // 如果没有数据   }else{   // 锁定   me.lock();   // 无数据   me.noData();   }   // 为了测试，延迟1秒加载   setTimeout(function(){   // 插入数据到页面，放到最后面   $('.lists').append(result);   // 每次数据插入，必须重置   me.resetload();   },1000);  },  error: function(xhr, type){   alert('Ajax error!');   // 即使加载出错，也得重置   me.resetload();  }  }); }, threshold : 50 });});</script>

$(function(){ //利用此写法，可以限制多次加载的个数。 var timer; $('.header .ipt').on('input',function(){ var _length = $(this).val(); // 如果输入值不是数字或者是空，就跳出 if(isNaN(_length) || _length === ''){  return false; } clearTimeout(timer); timer = setTimeout(function(){//也可不用定时器  // 清空内容  $('.lists').html('');  $('.dropload-down').remove();  var counter = 0;  // 每页展示4个  var num = 4;  var pageStart = 0,pageEnd = 0;  // dropload  $('.content').dropload({  scrollArea : window,  loadDownFn : function(me){   $.ajax({   type: 'GET',   url: 'json/more.json',   dataType: 'json',   success: function(data){    var result = '';    counter++;    pageEnd = num * counter;    pageStart = pageEnd - num;    for(var i = pageStart; i < pageEnd; i++){    result += '<a class="item opacity" href="'+data.lists[i].link+'">'      +'<img src="'+data.lists[i].pic+'" alt="">'      +'<h3>'+data.lists[i].title+'</h3>'      +'<span class="date">'+data.lists[i].date+'</span>'      +'</a>';    if((i + 1) >= _length || (i + 1) >= data.lists.length){     // 锁定     me.lock();     // 无数据     me.noData();     break;    }    }    // 为了测试，延迟1秒加载    setTimeout(function(){    $('.lists').append(result);    // 每次数据加载完，必须重置    me.resetload();    },1000);   },   error: function(xhr, type){    alert('Ajax error!');    // 即使加载出错，也得重置    me.resetload();   }   });  }  }); },500); });

$(function(){ // 按钮操作 $('.header .btn').on('click',function(){ var $this = $(this); if(!!$this.hasClass('lock')){  $this.attr('class','btn unlock');  $this.text('解锁');  // 锁定  dropload.lock();  $('.dropload-down').hide(); }else{  $this.attr('class','btn lock');  $this.text('锁定');  // 解锁  dropload.unlock();  $('.dropload-down').show(); } }); // dropload var dropload = $('.inner').dropload({ domUp : {  domClass : 'dropload-up',  domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',  domUpdate : '<div class="dropload-update">↑释放更新</div>',  domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>' }, domDown : {  domClass : 'dropload-down',  domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',  domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',  domNoData : '<div class="dropload-noData">暂无数据</div>' }, loadUpFn : function(me){  $.ajax({  type: 'GET',  url: 'json/update.json',  dataType: 'json',  success: function(data){   var result = '';   for(var i = 0; i < data.lists.length; i++){   result += '<a class="item opacity" href="'+data.lists[i].link+'" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'     +'<img src="'+data.lists[i].pic+'" alt="">'     +'<h3>'+data.lists[i].title+'</h3>'     +'<span class="date">'+data.lists[i].date+'</span>'     +'</a>';   }   // 为了测试，延迟1秒加载   setTimeout(function(){   $('.lists').html(result);   // 每次数据加载完，必须重置   dropload.resetload();   },1000);  },  error: function(xhr, type){   alert('Ajax error!');   // 即使加载出错，也得重置   dropload.resetload();  }  }); }, loadDownFn : function(me){  $.ajax({  type: 'GET',  url: 'json/more.json',  dataType: 'json',  success: function(data){   var result = '';   for(var i = 0; i < data.lists.length; i++){   result += '<a class="item opacity" href="'+data.lists[i].link+'">'     +'<img src="'+data.lists[i].pic+'" alt="">'     +'<h3>'+data.lists[i].title+'</h3>'     +'<span class="date">'+data.lists[i].date+'</span>'     +'</a>';   }   // 为了测试，延迟1秒加载   setTimeout(function(){   $('.lists').append(result);   // 每次数据加载完，必须重置   dropload.resetload();   },1000);  },  error: function(xhr, type){   alert('Ajax error!');   // 即使加载出错，也得重置   dropload.resetload();  }  }); } });});