随着web app这个词语的出世以来,在native app中内嵌 web app的案例是越来越多,很多功能都开始由web app来代替native app,那么都是些什么功能呢?
在一些辅助功能上,比如订单的查询等,用户操作不是很复杂的情况下,内嵌web app是比较好的一个选择,能够减少成本,而且还能大大地减少工作量。
这里,我介绍的是H5的下拉刷新功能。
下拉刷新$(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
hml +='
缴纳单号(订单号:'+res[i]['orderNo']+')'+res[i]['receiveTime']+' '+res[i]['realTotalMoney']+'';}
$('#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;
}
相应的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);