<script>
<!-- 實現(xiàn)滾動條滾動start -->
var pageNum = 1; // 當(dāng)前頁碼
var pageSize =10; // 當(dāng)前每頁條數(shù)
var pageCount=0;//總頁數(shù)
var winH = $('#div1').height();//頁面可視區(qū)域高度
var p=0, t=0; // 頂部和底部的距離
$(function(){
getData();//初始獲取數(shù)據(jù)，加載數(shù)據(jù)事件
//鼠標(biāo)滾動事件
$('#div1').scroll(function() {
var pageH = $('#result').height(); //當(dāng)前文檔總高度
var scrollT = $('#div1').scrollTop(); //滾動條top的值
var bottomH = (pageH - winH - scrollT) / winH; // 當(dāng)前所滾動位置到底部距離
p = $(this).scrollTop(); //頂部距離
if(t <= p){ // 判斷是否下滾
if (bottomH < 0.01) {
if (pageNum !== pageCount) {
pageNum ;
getData();
}else{ //沒有數(shù)據(jù)
$(".nodata").show().html("別滾動了，已經(jīng)到底了...");
}
}
}
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 = '<div class="item-info">' '<span>' val.stationName '</span>' '<span>' val.doorControlName '</span>' '<span>' val.personName '</span>' '<span>' val.eventTime '</span>' '</div>'
});
$("#result").append(html);
}
}
}
});
}
<!--end-->
</script>
<div id="div1" class="nui-scroll">
<div id="result"> </div>
<div class="nodata"></div>
</div>
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;
}
注意： 兩者都是在某一個元素的內(nèi)部添加內(nèi)容。 |
|
|
