移動端下拉分頁加載插件dropload.js

一、dropload.js下載地址:

http://www.jq22.com/jquery-info6960

該地址有dropload.js的基礎說明文檔，下載的壓縮包有相應的demo

二、依賴

Zepto 或者 jQuery 1.7以上版本，推薦jQuery 2.x版本（二者不要同時引用） 

Zepto or jQuery 1.7+，recommend to use jQuery 2.x（not use them at the same time）

三、bug及解決方案

1.小屏手機不加載問題

方案:將源文件的distance（拉動距離）參數改成2000；

1.模糊查詢，點擊完搜索按鈕，因上拉事件無法觸發，進到頁面就沒有數據問題。

一般來說，dropload的加載是沒有問題，但是，需求往往不是服務端一次性返回所有數據，往往還要支持服務端分頁，搜索，排序，多條件篩選等功能。分頁問題就不必說了，dropload本身的意義就是分頁加載

前段時間，在使用dropload進行條件查詢時，遇到了這個問題。

方案:dropload本身的思想就是一次向服務器請求一頁數據（條數自定義）。這樣每次只請求需要的幾條數據，減少了服務器響應時間。

而解決這個問題的思想就在於分步加載，第一步，不利用dropload進行ajax請求第一頁數據，剩余頁使用dropload請求

改進代碼如下:

 

 

 function selectMore(el){    
    var pageNum = 1;
    // 每頁展示6個
    var pageSize = 6; 
    var keyword = $(".search input").val();  
    
    var id = getUrlParam("id");          
    el.find($('.lists')).html("");
    $('.dropload-down').remove();
   
    var result = '';
    $.ajax({
        type: "post",
        url: BasicPath.URL + InterFaceJson.pageSelect,
        async:true,
        data:{
            pageSize: pageSize,
            pageNum: pageNum,
            categoryID: id,
            pattern: keyword
        },
        success: function(res){                
            var lists = res.data.list;
            var arrLen = lists.length;            
                
            for(var i = 0; i < arrLen; i++){
                
                result += '';//html模板，你懂得
            }            
            setTimeout(function(){
                // 插入數據到頁面，放到最后面
                el.find($(".lists")).append(result);
               
            },500);
            if(arrLen<6){
                $(".dropload-refresh").html('沒有更多內容了');

            }
        }            
    }) 
    self.moreFund = el.dropload({
        scrollArea : window,
        domDown:{
            domClass:'dropload-down',
            domRefresh:'<div class="dropload-refresh">↑上拉加載更多</div>',
            domLoad:'<div class="dropload-load">正在加載中</div>',
            domNoData:'<div class="dropload-noData">沒有更多內容了</div>'
        },       
        distance: 2000,
        loadDownFn : function(me){          
            pageNum++;            
            var result = '';
            $.ajax({
                type: "post",
                url: BasicPath.URL + InterFaceJson.pageSelect,
                async:true,
                data:{
                    pageSize: pageSize,
                    pageNum: pageNum,
                    categoryID: id,
                    pattern: keyword
                },
                success: function(res){                
                    var lists = res.data.list;
                    var arrLen = lists.length;        
                    
                    if( arrLen>0 ){
                        for(var i = 0; i < arrLen; i++){
                            
                            result += '';//html模板，你懂得
                        };                        
                    }else{
                        // 鎖定
                        me.lock();
                        // 無數據
                        me.noData();                  
                    }    
                    setTimeout(function(){
                        // 插入數據到頁面，放到最后面
                        el.find($(".lists")).append(result);
                        // 每次數據插入，必須重置
                        me.resetload();
                    },500);            
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加載出錯，也得重置
                    me.resetload();
                }
            });    
        }
    })  
}

 

 

 

這樣就完美解決了安卓手機上的，第一次點擊搜索不進行查詢的問題。