初学者。。嘻嘻。写的或许有点冗杂。。有需要的可以测试下
看到他们网站里异步加载挺给力的。所以自己写了一个异步加载的界面。
可以下载我们团队做的app来看到具体的效果,我这里只给出一部分代码。
第一,异步加载,加载的数据是通过thinkphp的returnajax()方法返回的。
先在页面上存了一个记录页数的方法,因为后台要传进去第几页来取出数据库中你的值
所以在html加上这一句:
其实jquery写异步请求真心简单,我通过读取页面的滚动条来获取到是不是到达页尾和加载数据
varpage_num_docuemt=$('.page_num');
$(window).scroll(function(event){
//获取到离底部的距离
varheight=$(document).height();
//获取滚动条高度
varscrollheight=$(document).scrollTop();
//获取到页面高度
varpageheight=$(window).height();
if(height<=pageheight+scrollheight){
//弹出正在加载
$('#loading').css({
"display":"inline"
});
ajax_get();
}
//console.log("页面高度:"+height+"滚动条高度:"+scrollheight+"页面高度:"+pageheight);
});
functionajax_get(){
varpage_num=page_num_docuemt.val();
$.post("one_buy_ajax",{page:page_num},function(data){
if(data.length!=0){
page_num_docuemt.val((parseInt(page_num)+1));
$('#loading').css({
"display":"none"
});
}else{
$('.loading').text("没有商品咯,亲!");
$('#loading').css({
"display":"inline"
});
}
//console.log(data);
//console.log("获取到的值:"+page_num+"下一个:"+(parseInt(page_num)+1));
$.each(data,function(i,item){
varhtml="";
html+="
";
html+="
";
html+="
";
html+="
";
html+="
"+item.name+"
";html+="
¥"+item.price+"积分¥"+item.y_price+"元
";
html+="
";
html+="
人气:200
";
html+="
已幸运:300
";
$('.goods_list').append(html);
});
});
}