移动端实现上拉加载更多(使用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();