本文實例為大家分享了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+'" +'<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+'" +'<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+'" +'<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+'" +'<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+'" +'<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+'" +'<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(); } }); } });});以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
