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