var pageNum = 1; // 当前页码
var pageSize =10; // 当前每页条数
var pageCount=0;//总页数
var winH = $('#div1').height();//页面可视区域高度
var p=0, t=0; // 顶部和底部的距离
$(function(){
getData();//初始获取数据,加载数据事件
//鼠标滚动事件
$('#div1').scroll(function() {
var pageH = $('#result').height(); //当前文档总高度
var scrollT = $('#div1').scrollTop(); //滚动条top的值
var bottomH = (pageH - winH - scrollT) / winH; // 当前所滚动位置到底部距离
p = $(this).scrollTop(); //顶部距离
if(t <= p){ // 判断是否下滚
if (bottomH < 0.01) {
if (pageNum !== pageCount) {
pageNum ;
getData();
}else{ //没有数据
$(".nodata").show().html("别滚动了,已经到底了...");
}
}
}
setTimeout(function(){t = p;},2000);//延时2秒
});
})
function getData() {
var html = '';
$.ajax({
type: "post",
url:"路径",
data:{"pageNum":pageNum,"pageSize":pageSize},
success: function (result) {
if(result.success){
pageCount=result.data.pageCount;
var list = result?result.data.rows:null;
if (list!=null) {
$.each(list, function(index, val) {
html = '
});
$("#result").append(html);
}
}
}
});
}
css代码
.nui-scroll{
border: 1px solid #000;
width: 450px;
height: 300px;
overflow-y:scroll
}
.item-info {
height: 30px;
font-size:18px;
background: #339999;
color: #fff;
}
.nodata{
font-size:20px;
text-align:center;
margin-bottom: 15px;
}
span{
margin-left: 15px;
}
注意:
两者都是在某一个元素的内部添加内容。
区别在于:append是在原有基础上增加,html中是替换当前所有内容,所以这里要用append来源:https://www.icode9.com/content-4-323951.html