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