声明:纯新手,有很多不足需改善,但基本功能能用,欢迎各位提出更好的建议!!!
直接上代码,可以直接复制!!!
html:
<div id="info"></div>
js:
/*起始页数,每页显示数据已经在后台写死*/
var curPage = 1;
$(window).on('scroll',function(){
/*判断当前浏览器高度,滚动条碰到时触发*/
if($(window).scrollTop()>=$(document).height()-$(window).height()){
/*如果ajax没有请求到数据直接return*/
if($(".loading").length) return;
/*每触发一次就给当前页数加 1*/
curPage++;
/*给后端发送需要的数据*/
var postData = {
page:curPage,
};
$.post("flfg",postData, function(response){
$('#info').html("<div class='loading' style='color:gray;text-align:center'>正在加载,请稍后...</div>");
/*判断是否有数据*/
console.log(response);
if (response.length)
{
var datastr = '';
for(var i in response){
var time = timestampToTime(response[i].addtime);
//根据个人需求拼接的代码
datastr += '<li class="aui-list-item aui-list-item-middle" data-url="{:U('arcdetail',array('id'=>'+response[i].id+'))}">';
datastr += '<div class="aui-list-item-inner aui-list-item-arrow">';
datastr += '<div class="aui-list-item-title aui-ellipsis-1 ">'+response[i].title+'</div>';
datastr += '<div class="aui-list-item-right">'+time+'</div>';
datastr += '</div></li>';
}
/*将数据追加到对应的元素标签下*/
$('#shujua').append(datastr);
$('#info').html("");
}else{
/*前端需要显示的地方自己去写一个div id=info*/
$('#info').html("<div class='loading' style='color:gray;text-align:center'>没有更多内容了</div>");
/* setTimeout(function(){
if($(".loading").length) $('#info').html('');
},800)*/
}
}, 'json');
}
});
php:(这里是看自己的逻辑写,我的是需要原来加载一些数据,所以是这种形式!主要是看正确区间的代码)
public function flfg()
{
$keyword = I('keyword','');
if($keyword){
$where['title'] = array('like','%'.$keyword.'%');
}
$perPage = 20; //每页显示数据量
if($_POST){
//var_dump($_POST['page']);
$page = ($_POST['page']-1) * $perPage +1;//接受页数
$where['cid'] = 16;
$data = M('Article')->where($where)->order('addtime desc')->limit($page,$perPage)->select();
echo json_encode($data);
} else {
$where['cid'] = 16;
$page = 0;
$this->data = M('Article')->where($where)->order('addtime desc')->limit($page,$perPage)->select();
$this->display();
}
}