随着web app这个词语的出世以来，在native app中内嵌 web app的案例是越来越多，很多功能都开始由web app来代替native app，那么都是些什么功能呢？
在一些辅助功能上，比如订单的查询等，用户操作不是很复杂的情况下，内嵌web app是比较好的一个选择，能够减少成本，而且还能大大地减少工作量。
这里，我介绍的是H5的下拉刷新功能。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉刷新</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<link rel="stylesheet" type="text/css" href="details.css" />
<script type="text/javascript" language="javascript" src="jquery-3.0.0.min.js"></script>
</head>
<body>
<script>
$(function(){
function DataRequest(){
var page = $("#page").val()
var userId = parseInt($("#userId").val());
$.ajax({
type: "post",
url: "getData.php",
data: {
userId:userId,
page : page
},
dataType : "json",
success: function(res){
var hml='';
for(var i=0;i<res.length;i++){
hml +='<li id='+res[i]['orderId']+'> <span><label>缴纳单号（订单号：'+res[i]['orderNo']+'）</label><label class="qgraycolor">'+res[i]['receiveTime']+'</label></span> <em class="plus">'+res[i]['realTotalMoney']+'</em></li>';
}
$('#ulUnjx').append(hml);
var pa = parseInt(page)+1;
$("#page").val(pa);
if(res.length<10){
$("#query").val(1);
}else{
$("#query").val(0);
}
},
error: function(){
alert('数据查询出错！');
}
});
}
/*
*给动态生成的li进行绑定点击事件
*/
$("#ulUnjx").on("click","li", function() {
location.href ="http://www.baidu.com";
});
$(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();
}
});
DataRequest();
});
function getLocalTime(time) {
var time = new Date(time*1000);
var y = judge(time.getFullYear());
var m = judge(time.getMonth()+1);
var d = judge(time.getDate());
var h = judge(time.getHours());
var i = judge(time.getMinutes());
var s = judge(time.getSeconds());
return y+'-'+m+'-'+d+' '+h+':'+i+':'+s;
}
function judge(time){
if(parseInt(time)<10){
return '0'+time;
}
return time;
}
</script>
<div class="main">
<div class="header"><a href="javascript:;" onclick="javascript:JavaScriptTo.onFinish();" class="history"></a>未缴纳费用</div>
<div class="total"><span>合计</span><em>￥{$res1.sum}</em></div>
<div class="bandpdetails">
<ul id="ulUnjx">
</ul>
</div>
</div>
<input id='end' type='hidden' value='{$count}'>
<input id='page' type='hidden' value='1'>
<input id='query' type='hidden' value='0'>
<input id='userId' type='hidden' value='{$userId}'>
</body>
</html>
相应的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);
