使用方法
1.引入文件
<script src="/app/media/js/dropload.min.js"></script>
11111111111111111
2.選擇刷新內容的位置
<div class="page-main">
<div class="list-box">
</div>
</div>
3.上拉加載，下拉刷新的主方法
1 <script> 2 // dropload 3 var page = 0; 4 $('.page-main').dropload({ //需要修改的地方->.page-madin 這個類，表示拉的是哪一個div 5 scrollArea : window, 6 domUp : { 7 domClass : 'dropload-up', 8 domRefresh : '<div class="dropload-refresh">↓pull down to refresh</div>', 9 domUpdate : '<div class="dropload-update">↑Release updates</div>', 10 domLoad : '<div class="dropload-load"><span class="loading"></span>load...</div>' 11 }, 12 domDown : { 13 domClass : 'dropload-down', 14 domRefresh : '<div class="dropload-refresh">↑Pull up load more</div>', 15 domLoad : '<div class="dropload-load"><span class="loading"></span>load...</div>', 16 domNoData : '<div class="dropload-noData">nothing</div>' 17 }, 18 loadUpFn : function(me){ //開始下拉刷新方法 19 $.ajax({ 20 type: 'GET', 21 url: '這里添加接口地址', 22 dataType: 'json', 23 success: function(res){ 24 if (res.error==1) { 25 alert(res.msg) 26 }else{ 27 var da = res.data; 28 if(da){ 29 $('.list-box').html(da); //可以選擇獲取數據后在這里拼接，也可以在后台直接返回html，然后在這里直接放入容器中 30 }else{ 31 me.lock(); 32 me.noData(); 33 } 34 me.resetload(); 35 } 36 }, 37 error: function(xhr, type){ 38 // 即使加載出錯，也得重置 39 me.resetload(); 40 } 41 }); 42 }, 43 loadDownFn : function(me){ 44 page++; 45 var result = ''; 46 $.ajax({ 47 type: 'GET', 48 url: '接口地址'+'&page='+page, 49 // 動態數據地址 50 dataType: 'json', 51 success: function(res){ 52 if (res.error==1) { 53 alert(res.msg) 54 }else{ 55 var da = res.data; 56 if(da){ 57 result = da; 58 }else{ 59 me.lock(); 60 me.noData(); 61 if($(".list-box").find(".zx-zwsj") != undefined){//如果粗在暫無數據的圖片，那么把已經到底了給刪除掉 62 $(".list-box").find(".dropload-down").remove(); 63 } 64 } 65 $('.list-box').append(result); //放入內容的容器 66 me.resetload(); 67 } 68 }, 69 error: function(xhr, type){ 70 // alert('Ajax error!'); 71 me.resetload(); 72 } 73 }); 74 } 75 }); 76 </script>
今天是第四次使用這個js插件，理應是很熟練，但是這次遇到一個問題，也有可能是距離上一次做時間太久了
問題描述: 在下拉刷新后，無法上拉加載更多，頁面顯示
↑Pull up load more
問題原因：我后台寫的接口分頁一次為5條，但是5條數據在前台頁面顯示不足以填充滿整個頁面
就像上圖這樣，所以但是其實數據有9條，頁面就無法加載出第2頁另外的4條，無法上拉加載更多
解決方法：修改后台分頁，每頁顯示6條，這樣一次返回6條數據的時候，就能充滿整個頁面，上拉加載更多也能正常使用了