用js实现下拉滑页效果
代码
- js内容
/* 下拉滑页 */
$(window).scroll(function(){
var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度
//alert(scrollTop);
var scrollHeight = $(document).height(); //当前页面的总高度
//alert(scrollHeight);
var windowHeight = $(this).height(); //当前可视的页面高度
//alert(windowHeight);
if(scrollTop + windowHeight >= scrollHeight - 20) { //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
var pageStart = parseInt($("#pageStart").val())+4;
//alert(pageStart);
$("#pageStart").val(pageStart);
var pg = Dd("pageStart").value;
console.log(pg);
//alert(pg);
/* $("#pageSize").val(pageSize); */
/* window.location.href="mall.php?action=list&catid=4&pageSize="+pageSize; */
if(pg>($xlcount-1)){
//将input元素设置为disabled
/* $("#pageStart").val(0); */
return false;
}
$.ajax({
type:'post',
data:"pageStart="+pageStart,
url:'qysp_pt.php?userid={$userid}&flag=getmore',
success:function(data){
//alert(data);
var obj = eval('(' + data + ')');
console.log(obj);
for(var i = 0;i<obj.length;i++){
var html= "<li>"
+"<a href='mall_detail.php?item="+obj[i].itemid+"'>"
+" <img src='"+obj[i].thumb+"' />"
+"<div class='pro_info'>"
+"<p class='p_title left'>"+obj[i].title+"</p>"
+"<p class='p_price left'>¥"+obj[i].price+"</p>"
+"<p class='p_deal right'>成交"+obj[i].sales+"笔</p>"
+"<p class='clear'></p>"
+"</div></a></li>";
$("#zxgy").append(html);
}
}
})
}
})
2.html内容
<input type="hidden" id="pageStart1" value="0"/>
3.后台内容
if($flag=='getmore'){
//limit语句省略
$string = json_encode($gy); //对查出来的$gy进行转码
exit($string);
}
思路
- pageStart随着页面下拉不断改变
- 将pageStart的值传递给后台,以便后台进行limit语句
- 如果成功则拼接html