dropload.js（上拉加載插件使用過程當中遇到的坑）

時間 2019-11-08

標籤 dropload.js dropload 加載插件使用過程當中遇到欄目 JavaScript 简体版

原文原文鏈接

　　dropload.js相關介紹和使用以及demo下載詳見：https://github.com/ximan/dropload （原文出處）html

　　以前由於項目須要一個上拉加載的效果，而後無心中看到了此插件，用了以後感受挺好用的，就是坑太多，下面列出一些我在實際使用中遇到的問題。
git

　　注：若是在使用該插件的時候遇到問題，確實沒法解決，也沒有人能幫你解決，建議換插件或者加羣，羣號也在上面的連接裏面github

　　問題1：給某個元素（好比查詢按鈕）加上onclick事件之後，無論點幾回，加載效果也會增長几個，以下圖所示ajax

解決方法：給綁定onclick事件的元素裏面加上這句代碼 $(".dropload-down").remove(); json

　　　　　以下圖，這樣點擊觸發onclick事件的同時，刪掉了點擊後增長的加載效果app

問題2：以下圖，想增長一個查詢條件，給查詢按鈕綁定onclick事件，上拉加載能夠正常顯示數據，但點擊查詢按鈕，數據沒有加載出來，沒有任何反應dom

解決方法：須要在調用的上拉加載方法裏面先進行初始化，但用該插件自己的初始方法resetload() 會報錯，以下圖post

加上這句代碼：$(".lists").children().remove(); 至關於初始化；這裏的.lists就是一個容器，加載出來的數據就是添加到這裏面ui

問題3：雖然設置了 var page = 1；但加載數據之後，實際獲取到的不是第一頁的數據，而是第二頁的數據，以下圖this

解決方法：設置 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();
                        }
                    });
                }
            });
        }