本文實例為大家分享了dropload.js下拉刷新和上拉加載的具體代碼，供大家參考，具體內容如下

第一步，下載dropload插件，dropload插件下載地址 官方文檔：https://github.com/ximan/dropload
第二步，將下載好的dropload插件中的dropload.css，dropload.min.js文件引入到頁面中，注意還要引入 Jquery1.7 以上 或者 Zepto 二選一，不要同時都引用，因為dropload是基于jquery實現的
第三步，將以下代碼放到頁面的最底部，注意是最底部，否則dropload插件獲取不了高度

**基本代碼結構**//#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>