下拉刷新其实就是下拉一定高度,调用ajax去控制器获取数据,将返回来的json数据用js追加到页面相应位置
$(function(){
var winH = $(window).height(); //页面可视区域高度
var i; //设置当前页数
i = $('#cur_pages').val();
$(window).scroll(function () {
var pageH = $(document.body).height();
var scrollT = $(window).scrollTop(); //滚动条top
var aa = (pageH-winH-scrollT)/winH;
if(aa<0.02){
$.getJSON("{WEB_PATH}/index/cloud_goods/ajax_cloud_goods_l",{page:i},function(json){
if(json){
var str = "";
$.each(json,function(index,array){
$('#ulRecommend').append(
'<li id="16973">'+
'<div class="f_bor_tr">'+
'<div class="m-tj-pic">'+
'<a href="{WEB_PATH}/cgoods/'+array.id+'" class="u-lott-pic">'+
'<img src="{G_UPLOAD_PATH}/'+array.g_thumb+'" border=0 alt="'+array.g_title+'" />'+
'</a>'+
'<ins class="u-promo">价值:'+array.g_money+'购买币</ins>'+
'</div>'+
'<div class="Progress-bar">'+
'<p class="title_cut" style="padding-bottom:5px"><span>'+array.g_title+'</span></p>'+
'<p class="u-progress" title="已完成">'+
'<span class="pgbar" style="width:0%;">'+
'<span class="pging"></span>'+
'</span></p>'+
'<ul class="Pro-bar-li">'+
'<li class="P-bar01"><em>'+array.canyurenshu+'</em>已参与</li>'+
'<li class="P-bar02"><em>'+array.zongrenshu+'</em>总需人次</li>'+
'<li class="P-bar03"><em>'+(array.zongrenshu - array.canyurenshu) +'</em>剩余</li>'+
'</ul></div></div></li>'
);
});
i++;
$('#cur_pages').val( i );
}else{
$("#nodata").show().html("别滚动了,已经到底了。。。");
return false;
}
});
}
});
});
注意:
[1] 页面要有一个保存当前页数的input隐藏域
[2] 返回来的数组用$.each(json,function(index,array),其中json是返回来的json数组,index是key值,array是value,后面要用的字段直接用array.canyurenshu即可
[3] 追加写法要注意,一行中用单引号引起来,后面用‘+‘连接,变量写法为'+array.canyurenshu+'