dropload.js（上拉載入外掛使用過程中遇到的坑）
阿新 • • 發佈：2019-02-05
之前因為專案需要一個上拉載入的效果，然後無意中看到了此外掛，用了之後感覺挺好用的，就是坑太多，下面列出一些我在實際使用中遇到的問題。
注：如果在使用該外掛的時候遇到問題，確實無法解決，也沒有人能幫你解決，建議換外掛或者加群，群號也在上面的連結裡面。
問題1：給某個元素（比如查詢按鈕）加上onclick事件以後，不管點幾次，載入效果也會增加幾個，如下圖所示
解決方法：給繫結onclick事件的元素裡面加上這句程式碼 $(".dropload-down").remove(); （如下圖） 這樣點選觸發onclick事件的同時，刪掉了點選後增加的載入效果。
問題2：
解決方法：需要在呼叫的上拉載入方法裡面先進行初始化，但用該外掛本身的初始方法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();
}
});
}
});
}
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();
}
});
}
});
}