功能描述
最近一直在做一个微信公众号的开发,用到部分数据的显示,需要请求多个页面的数据到本html。例如含有数据的页面是list2.html,list3.html,list4.html等,查询资料学习甚久,终于完成。本人新手,用来总结之用,高手勿喷。
源代码
var page=2;
var finished=0;
var sover=0;
var setdefult=setInterval(function (){
if(sover==1)
clearInterval(setdefult);
else if($("#plush-ul").height()<$(window).height())
loadmore($(window));
else
clearInterval(setdefult);
},500);
function loadmore(obj){
if(finished==0 && sover==0)
{
var scrollTop=$(obj).scrollTop();
var scrollHeight=$(document).height();
var windowHeight=$(obj).height();
var baseUrl=" 固定的url前缀";
//比如http://localhost:8080/html/list
if(scrollTop+windowHeight-scrollHeight<=50){
setTimeout(function(){
page+=1;
finished=0;
},1000);
$.ajax({
type:"get",
url:baseUrl+page+".html",
//当page=2时即http://localhost:8080/html/list2.html 依次调取list3.html,list4.html等
dataType:'html',
data:{},
success:function(result){
var backHtml=$(result).find("#plush-ul li")//选取所需页面的部分
$("#hide").html(backHtml);//存储到本页面的空div
$('#hide').hide();//另div隐藏
$("#plush-ul").append(backHtml);//将获取数据到的加到本页数据之后
$('#plush-ul').show();//将数据显示出来
},
});
finished=1;
}
}
}
//页面滚动执行事件
$(window).scroll(function (){
loadmore($(this));
});
下滑加载模块 部分引用:http://www.86y.org/art_detail.aspx?id=752