dropload.js（上拉載入外掛程式使用過程中遇到的坑）

標籤：str   err   arch   loading   page   desc   drop   ima   調用   

 　

　　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>，如，

，

這樣就可以了，

 

 

 註：我是參照的原文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();                }            });        }    });}

 

dropload.js（上拉載入外掛程式使用過程中遇到的坑）