php实现网页下拉刷新,js实现H5下拉刷新

随着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;

}

未缴纳费用

合计 ￥{$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);