
記錄初始化的頁數(shù),now為當(dāng)前頁,num為總頁數(shù),這個數(shù)值的設(shè)置是通過php獲取分頁的時候的總頁數(shù)
<div class="caseud" now="1" num="2">
<a href="javascript:;">加載更多</a>
</div>
<script type="text/javascript">
//記錄狀態(tài)
var state=true;
//滾動條滾動的時候
$(window).scroll(function(){
//獲取當(dāng)前加載更多按鈕距離頂部的距離
var bottomsubmit = $('.caseud').offset().top;
//獲取當(dāng)前頁面底部距離頂部的高度距離
var nowtop = $(document).scrollTop()+$(window).height();
//獲取當(dāng)前頁數(shù),默認第一頁
var now = $('.caseud').attr('now');
//獲取總頁數(shù),PHP分頁的總頁數(shù)
var num = $('.caseud').attr('num');
//當(dāng)當(dāng)前頁面的高度大于按鈕的高度的時候開始觸發(fā)加載更多數(shù)據(jù)
if(nowtop>bottomsubmit){
//如果為真繼續(xù)執(zhí)行,這個是用于防止?jié)L動獲取過多的數(shù)據(jù)情況
if(state==true){
//執(zhí)行一次獲取數(shù)據(jù)并停止再進來獲取數(shù)據(jù)
state=false;
setTimeout(function(){
//當(dāng)前頁數(shù)++
now++;
//記錄當(dāng)前為第二頁
$('.caseud').attr('now',now);
$.ajax({
//通過ajax傳頁數(shù)參數(shù)獲取當(dāng)前頁數(shù)的數(shù)據(jù),ajax_more_case.php代碼參考php分頁功能
url:'ajax_more_case.php?page='+$('.caseud').attr('now')',
type:'GET',
cache:false,
dataType:"html",
success:function(data){
//把通過php處理的html和數(shù)據(jù),寫入容器底部
$('.case').append(data);
//如果當(dāng)前頁大于等于總頁數(shù)就提示沒有更多數(shù)據(jù)
if(now>=num){
$('.caseud a').text('沒有更多數(shù)據(jù)');
//并把狀態(tài)設(shè)置為假,下次下滑滾動時不再通過ajax獲取數(shù)據(jù)
state=false;
}else{
//否則繼續(xù)
state=true;
}
},
error:function(){
$('.caseud a').text('加載錯誤,請刷新頁面!');
}
});
},500);
}
}
});
</script>
這里的下滑到底部加載更多的功能,通過判斷屏幕是否滾動到底部,當(dāng)滾動到底部的時候通過分頁頁數(shù)去ajax數(shù)據(jù)過來,并寫入到頁面中。
您發(fā)布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權(quán)益;
二、不得發(fā)布國家法律、法規(guī)明令禁止的內(nèi)容;互相尊重,對自己在本站的言論和行為負責(zé);
三、本站對您所發(fā)布內(nèi)容擁有處置權(quán)。