js实现H5下拉刷新

随着web app这个词语的出世以来，在native app中内嵌 web app的案例是越来越多，很多功能都开始由web app来代替native app，那么都是些什么功能呢？
在一些辅助功能上，比如订单的查询等，用户操作不是很复杂的情况下，内嵌web app是比较好的一个选择，能够减少成本，而且还能大大地减少工作量。

这里，我介绍的是H5的下拉刷新功能。

未缴纳费用

 
合计￥{$res1.sum}
 

  

  
 

    
    
    
    

相应的css代码

.total{ width:100%; background:#fff; height:3.6rem; line-height:3.6rem; padding:0 0.8rem; border-bottom:1px solid #eee; }
.total span{ font-size:1.3rem; color:#333; float:left; display:inline-block; text-align:left;font-weight:600;}
.total em{ display:inline-block; float:right; text-align:right; color:#ff704f; font-size:1.3rem;font-weight:600;}

后端使用的是php代码，这里就不附上去了。

原理 : 用户手动进行了滚动条的下拉，让js捕捉到这个滚动事件，再通过dataRequest这个函数实现ajax数据的加载。

$(window).scroll(function(){    
        var is_ctnue =$("#query").val();
        var viewH =$(window).height();//可见高度
        var contentH =$(document).height();//内容高度
            var scrollTop =$(window).scrollTop();//滚动高度
        if($("#page").val()>$("#end").val()){
            return;
        }
        if((contentH - viewH - scrollTop <= 0) && (is_ctnue == 0)) {
            DataRequest();
        }
});

以上这段代码就是捕捉滚动事件的代码，每滚动一次滚动条，js就能通过$(window).scroll给捕捉到，再通过viewH 、contentH、scrollTop 判断滚动条是否已经到达底部来使DataRequest函数执行。

if($("#page").val()>$("#end").val()){
    return;
}

上面这段代码，主要是判断是否加载结束。

$("#end").val() 是数据的总页数，这个是由后端php程序传到前端的。
$("#page").val() 这个是当前数据的页数，由js进行控制。
is_ctnue 变量也是判断数据是否加载结束，不过这个和页数的判断有点不同。

看看上面附上的代码中，有一段这样的代码:

 if(res.length<10){
        $("#query").val(1);
}else{
        $("#query").val(0);
}  

这里的10表示每页有10条数据，当从后端传回前端的数据中，小于了10条数据，说明数据不够传递了，也就是表示数据已全部加载成功，不需要再下拉刷新了，再通过对input标签的赋值（这个值就是 is_ctnue变量的来源）
来结束加载。

再把加载的数据放入到ul标签中，也就是上面的那个append函数。

 $('#ulUnjx').append(hml);