dropload.js相關介紹和使用以及demo下載詳見：https://github.com/ximan/dropload （原文出處）
之前因為項目需要一個上拉加載的效果，然后無意中看到了此插件，用了之后感覺挺好用的，就是坑太多，下面列出一些我在實際使用中遇到的問題。
注：如果在使用該插件的時候遇到問題，確實無法解決，也沒有人能幫你解決，建議換插件或者加群，群號也在上面的鏈接里面
問題1：給某個元素（比如查詢按鈕）加上onclick事件以后，不管點幾次，加載效果也會增加幾個，如下圖所示
解決方法：給綁定onclick事件的元素里面加上這句代碼 $(".dropload-down").remove();
如下圖，這樣點擊觸發onclick事件的同時，刪掉了點擊后增加的加載效果
問題2：如下圖，想增加一個查詢條件，給查詢按鈕綁定onclick事件，上拉加載可以正常顯示數據，但點擊查詢按鈕，數據沒有加載出來，沒有任何反應
解決方法：需要在調用的上拉加載方法里面先進行初始化，但用該插件本身的初始方法resetload() 會報錯，如下圖
加上這句代碼：$(".lists").children().remove(); 相當於初始化；這里的.lists就是一個容器，加載出來的數據就是添加到這里面
問題3：雖然設置了 var page = 1；但加載數據以后，實際獲取到的不是第一頁的數據，而是第二頁的數據，如下圖
解決方法：設置 var page = 0；即可，因為這個插件的第一頁實際是從0開始的，所以不能設置為var page = 1；
問題4：加載效果的圈圈一直不停的循環加載顯示，如下圖，
解決方法： 如下圖，這個插件規定每次數據插入以后，必須要執行resetload()方法重置，否則就會出現無限加載的情況
問題5：如果想要修改此插件上拉加載默認顯示的文字，比如："上拉加載更多"，"加載中"，"暫無數據"
解決方法：此插件也提供了相應的參數,如下圖，（具體見原文鏈接）
注： 若上拉加載方法里面沒有加這段代碼，默認顯示的是這些文字，如果想要修改這些文字，只需要在上拉加載方法里加上這段代碼，修改文字即可，如下圖
問題6：承接問題5，其它文字修改以后都沒有問題，但如下圖這句代碼，把默認的加載中...改為正在加載中以后，默認上拉加載效果的圈圈就沒有了
，
解決方法： 需要在修改的文字前面加上<span class="loading"></span>，如下圖
，
這樣就可以了，
問題7： 代碼沒有錯，也加了下圖紅色框中的代碼
但是依然沒有下圖的提示
解決方法：最后發現是容器的問題，如下圖箭頭指向的容器就是最后字符串拼接好以后要放入的div
這個div不能是這樣
<div class="content"></div>
必須在嵌套一個div, 然后拼接的字符串就append在嵌套的這個div里
<div class="content"> <div class="item1-main"></div> </div>
注：我是參照原文demo1示例進行修改的，建議首次使用此插件的小伙伴都參照demo1示例進行修改，其他示例可能除了遇到上述坑外，還會有其他坑
這是我參照demo1示例，在實際項目中使用該插件加載數據的代碼
function orderList(){ var submit_begin = $("#dateStart01").val(); var submit_end = $("#dateEnd01").val(); var billCompanyName = $("#billCompanyName01").val(); var page = 0; // 這個插件的第一頁是從0開始的 var size = 10; // 每頁展示10個 // dropload $('#item1-main').dropload({ scrollArea : window, loadDownFn : function(me){ page++; // 拼接HTML $.ajax({ type: 'post', url: 'orderController.do?searchTdOrderListDms', data:{ "page":page,"size":size,"submit_begin":submit_begin,"submit_end":submit_end,"billCompanyName":billCompanyName }, dataType: 'json', success: function(data){ var arrLen = data.obj.length; var orderList = ''; if (!data.success) { mui.toast(data.msg); return false; } if(arrLen > 0){ $(data.obj).each(function (k, v) { orderList+='<div class="orderlist-div2" data-id="'+v.id+'">'; orderList+='<ul class="orderlist-div2-ul">'; orderList+='<li class="orderlist-li-main-1">'; orderList+='<div class="orderlist-li-div-left">'; orderList+='<span class="orderlist-li-span1">訂單組：</span>'; if(v.orderGroup == null){ orderList+='<span class="orderlist-li-span2"> </span>'; }else{ orderList+='<span class="orderlist-li-span2">'+v.orderGroup+'</span>'; } orderList+='</div>'; orderList+='</li>'; orderList+='<li class="orderlist-li-main-1">'; orderList+='<div class="orderlist-li-div-left">'; orderList+='<span class="orderlist-li-span1">訂單號：</span>'; orderList+='<span class="orderlist-li-span2">'+v.orderNo+'</span>'; orderList+='</div>'; orderList+='<div class="orderlist-li-div-right">'; orderList+='<span class="orderlist-li-span3">'+v.orderTypeDesc+'</span>'; orderList+='</div>'; orderList+='</li>'; orderList+='<li class="orderlist-li-main-2">'; orderList+='<div class="">'; orderList+='<div class="orderlist-li-div1">'; orderList+='<span>訂單數量：</span>'; if(v.weight == null){ orderList+='<span> </span>'; }else{ orderList+='<span>'+v.weight+'</span>'; } orderList+='</div>'; orderList+='<div class="orderlist-li-div2">'; orderList+='<span>訂單金額：</span>'; if(v.total == null){ orderList+='<span> </span>'; }else{ orderList+='<span>¥'+v.total+'</span>'; } orderList+='</div>'; orderList+='<div class="orderlist-li-div3">'; orderList+='<span>實際支付：</span>'; if(v.realPay == null){ orderList+='<span class="order-price"> </span>'; }else{ orderList+='<span class="order-price">¥'+v.realPay+'</span>'; } orderList+='</div>'; orderList+='<div class="orderlist-li-div3">'; orderList+='<span>開票方：</span>'; orderList+='<span>'+v.billCompanyName+'</span>'; orderList+='</div>'; orderList+='</div>'; orderList+='</li>'; orderList+='<li class="orderlist-li-main-3">'; orderList+='<span>'+UnixToDate(v.createDate/1000)+'</span>'; orderList+='<div class="orderlist-li-main-3-float">'; if(v.orderStatus != '2'){ orderList+='<button class="chakan-btn" onclick="orderButtoon(this,0);">查看詳情</button>'; }else{ orderList+='<button class="chakan-btn" onclick="orderButtoon(this,1);">修改</button>'; } orderList+='</div>'; orderList+='</li>'; orderList+='</ul>'; orderList+='</div>'; }) // 如果沒有數據 }else{ // 鎖定 me.lock(); // 無數據 me.noData(); } $(".item1-main").append(orderList); me.resetload(); // 每次數據插入，必須重置 }, error: function(xhr,type){ alert('Ajax error!'); // 即使加載出錯，也得重置 me.resetload(); } }); } }); }
如果你用了laytpl模板: http://www.cnblogs.com/tu-0718/p/7423700.html
function orderView(type){ var page = 0; // 這個插件的第一頁是從0開始的 var rows = 10; // 每頁展示10個 /* 點擊查詢按鈕時清空當前顯示的頁數，從第一頁開始重新顯示 */ if (type==1) { page = 0; } $(".tutu").children().remove(); //相當於初始化,不加的話會導致點擊查詢以后,執行該方法，但是加載不出數據 $(".dropload-down").remove(); //去除每次點擊查詢的時候都會新增加一個loading加載提示的BUG var createDate_begin = $("#dateStart01").val(); var createDate_end = $("#dateStart01").val(); // dropload $('.orderlist-div2').dropload({ scrollArea: window, domDown: { domClass: 'dropload-down', domLoad: '<div class="dropload-load"><span class="loading dropload-loading"></span>加載中...</div>', domNoData: '<div class="dropload-noData">已經到底了</div>' }, loadDownFn : function(me){ page++; //組裝數據 var data = "page="+page+"&rows="+rows; data = data+"&createDate_begin="+createDate_begin; data = data+"&createDate_end="+createDate_end; // 拼接HTML $.ajax({ url: 'tdOrderController.do?findTdOrderListDms', type: 'post', data:data, dataType: 'json', success: function(d){ if (!d.success) { mui.toast(d.msg); return false; } if(d.rows.length > 0){ laytpl(gettpl).render(d, function(html){ $(".tutu").append(html); }); }else{ // 鎖定 me.lock(); // 無數據 me.noData(); } me.resetload(); // 每次數據插入，必須重置 }, error: function(xhr,type){ alert('Ajax error!'); // 即使加載出錯，也得重置 me.resetload(); } }); } }); }