移動端實現上拉加載更多(使用dropload.js vs js)

做下筆記,:移動端實現上拉加載更多,其實是數據的分段加載,在這里為了做測試我寫了幾個json文件作為分段數據:

方式一:使用dropload.js;

配置好相關參數及回調函數就可使用:代碼如下

var paging = 1;//頁碼數
 //初始化展示第一頁數據
  $.ajax({
        type: 'GET',
        url: "code"+paging+".json", 
        dataType: 'json',
        success: function(data){ 
            var result = ''; 
            for(var i = 0; i < data.length; i++){ 
                result += "<tr><td>"+data[i].qy+"</td><td>"+data[i].num+"</td><td>"+data[i].total+"</td></tr>"; 
            }  
            $('#code-table').append(result); 
        } 
    });
    // dropload函數接口設置
    $(".code-table").dropload({
        scrollArea : window, 
        domDown : {
            domClass   : 'dropload-down',
            // 滑動到底部顯示內容
            domRefresh : '<div class="dropload-refresh">↑上拉加載更多</div>',
            // 內容加載過程中顯示內容
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加載中...</div>',
            // 沒有更多內容-顯示提示
            domNoData  : '<div class="dropload-noData">無更多數據</div>'
        }, 
        loadDownFn : function(me){
            paging++; // 每次請求，頁碼加1
            $(".code-table").css("height","auto");//容器初始化時我設置了高度,當加載更多時應該去掉,讓內容撐開
            $.ajax({
                type: 'GET',
                url: "code"+paging+".json",　　//分段模擬數據,json文件
                dataType: 'json',
                success: function(data){
                    // data = JSON.parse(data); 
                    var result = '';
                    // 選擇需要顯示的數據 拼接 DOM
                    for(var i = 0; i < data.length; i++){ 
                        result += "<tr><td>"+data[i].qy+"</td><td>"+data[i].num+"</td><td>"+data[i].total+"</td></tr>"; 
                    }
                     if(data.length<9){
                            // 再往下已經沒有數據
                            // 鎖定
                            me.lock();
                            // 顯示無數據
                            me.noData(); 
                     }
                    // 為了測試，延遲1秒加載
                    setTimeout(function(){
                        // 加載 插入到原有 DOM 之后
                        $('#code-table').append(result);
                        // 每次數據加載完，必須重置 
                        me.resetload();
                    },1000);
                },
                // 加載出錯
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加載出錯，也得重置
                    me.resetload();
                }
            });
        },
        threshold : 50 
    });

dropload下拉刷新等更多詳情可參考:http://www.jianshu.com/p/65c718093d44;

方法二:利用移動端touch事件(貌似originalEvent事件需要jq2.0+版本)自定義方法(歡迎糾正);

方法代碼:

　　　　　　　var $Od=$(document);//觸摸對象
 2 　　　　　　　var pIndex=1; //頁碼數
            var pSize=6;  //每頁數據個數
            var flag=1;   //為了防止重復滑動導致數據錯亂,我設置了一個標記,為1時上拉有效,為0無效
　　　　function sliderMore(){
                //觸摸事件開始 
                $Od.on('touchstart.mo',function(ev){
                    //獲取手指觸摸列表,[0]代表第一個像素點
                    var touch = ev.originalEvent.changedTouches[0];
                    var disy1 = touch.pageY; //記錄當前位置
                    //開始滑動
                    $Od.on('touchmove.mo',function(ev){
                        
                    })
                    //抬起手指結束事件
                    $Od.on('touchend.mo',function(ev){
                         if(flag){  
                         //再次獲取手指觸摸列表,[0]代表第一個像素點,並記錄位置
                        var touch = ev.originalEvent.changedTouches[0];
                        var disy2 = touch.pageY; 
                        //判斷條件為上拉
                        if((disy1-disy2)>20){  
                            flag=0;//開始上拉設置重復上拉無效 pIndex++;//每次請求頁碼+1 

                 　　　　　　 $('#tips').html("加載中..."); //樣式,可自定義 
                            //下面是本人寫的ajax請求數據,可自定義
                                var startVal = $("#dstart").val();
                                var endVal = $("#dend").val();
                                var data = {
                                         "method":"get_activated_code_info", 
                                         "start_time":startVal,
                                         "end_time":endVal,
                                         "page_index":pIndex,
                                         "page_size":pSize
                                     };
                                    data = JSON.stringify(data);
                                    ajaxCall(data,function(result){ 
                                        //為了測試,延時展現數據效果
                                        setTimeout(function(){  
                                            //將請求結果展現出來
                                                for(var i in result.items){
                                                      addItem(result.items[i].company_name,result.items[i].code_activated,result.items[i].activated_amount); 
                                                  } 
                                                $('#tips').html("上拉加載更多");
                                                //判斷請求的結果有沒有數據,沒有就改變提示內容
                                                if(result.items.length==0){
                                                     console.log(245);
                                                     $('#tips').html("無更多數據");  
                                                }  
                                        },500);
                                        //要在數據展示出來之后,再將flag設為1,所以這里時間1000>500,這里可以只要一個定時器(就不改了),可以遍歷數據不需放在定時器里,遍歷用個變量保存,然后定時一次加入容器同時flag=1;
                                        setTimeout(function(){  
                                                flag=1; 
                                        },1000);
                                    }); 
                            }
                        }  
                    })
                }) 
            }
sliderMore();