這個內(nèi)容是官網(wǎng)上發(fā)的,不過那個上面寫得不是很清楚,特別整理一下重新發(fā)布。希望對大家有所作用
弟一:引入JS
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
第二: <!------------定義內(nèi)容的Dom位置----------------->
<div class="mylist">
{pboot:list num=2 order='sorting asc'}
<div class="title"><a href="[list:link]">[list:title]</a></div>
<div class="desc">[list:description]</div>
<hr>
{/pboot:list}
</div>
第三:添加按鈕
<button id="More" type="submit">點擊加載更多</button>
第四:添加JS
<script>
//先定義一些基本的內(nèi)容
//Page就是第幾頁,由當前頁0 + 1,就是第二頁,parseInt確保該數(shù)值是Int類型。
var Page = parseInt('1') + 1;
//Num就是每頁幾條信息,因為列表默認顯示的是2條,所以這里設為2,結(jié)合上面的第二頁實際上就是從第三條信息開始讀取。
var Num = 5;
//定義內(nèi)容的Dom位置,也就是讀取出來的內(nèi)容要添加到哪個div里面去。
var Dom = jQuery('.mylist');
//使用jQuery的scroll()方法來監(jiān)聽頁面滾動
jQuery(window).scroll(function(){
//當前窗口和頁面頂部的距離
var WindowTop = jQuery(window).scrollTop();
//可視窗口區(qū)域高度
var WindowHeight = jQuery(window).outerHeight();
//頁面的高度
var DocHeight = jQuery(document).height();
//定義一個開關
var load = true;
//判斷:(窗口與頁面頂部距離 + 窗口高度) >= 頁面的高度(也就是滾動到頁面底部的時候),并且開關是開啟狀態(tài),執(zhí)行ajax加載內(nèi)容
if( ( WindowTop + WindowHeight ) >= DocHeight && load == true ){
//請求地址
var url = '/api.php/list/2/page/' + Page + '/num/' + Num;
//設置開關狀態(tài)為關閉,防止重復加載
load = false;
//開始Ajax提交請求,請求路徑就是Api接口
jQuery.ajax({
//請求類型
type: 'POST',
//請求地址
url: url,
//返回數(shù)據(jù)類型
dataType: 'json',
//請求參數(shù),參考官方Api手冊,在站內(nèi)使用以下參數(shù)會自動獲取
data: {
appid: '{pboot:appid}',
timestamp: '{pboot:timestamp}',
signature: '{pboot:signature}',
},
//請求成功
success: function( response, status ){
var Data = response.data;
if( response.code ){
//獲取數(shù)據(jù)成功
jQuery.each( Data, function( index, value ){
//獲取一些數(shù)據(jù)
var Article_Url = '/index.php/content/' + value.id,
Article_Date = value.date.split(' ')[0];
//將內(nèi)容append到列表
var Html = '<div class="title"><a href="' + Article_Url + '">' + value.title + '</a></div><div class="desc">' + value.description + '</div><hr>';
//在原本的數(shù)據(jù)列表后面添加新的數(shù)據(jù)
Dom.append( Html );
});
//設置開關狀態(tài)為開啟,進行下次加載
load == true;
//頁碼+1
Page += 1;
} else {
//返回數(shù)據(jù)錯誤
jQuery('#More').html('<span>' + Data + '</span>');
}
},
error:function( xhr, status, error ){
//將內(nèi)容append到列表
var Html = '加載數(shù)據(jù)錯誤';
//在原本的數(shù)據(jù)列表后面添加新的數(shù)據(jù)
Dom.append( Html );
}
})
}
})
</script>