這個(gè)內(nèi)容是官網(wǎng)上發(fā)的,不過(guò)那個(gè)上面寫得不是很清楚,特別整理一下重新發(fā)布。希望對(duì)大家有所作用
弟一:引入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">點(diǎn)擊加載更多</button> 第四:添加JS <script> //先定義一些基本的內(nèi)容 //Page就是第幾頁(yè),由當(dāng)前頁(yè)0 + 1,就是第二頁(yè),parseInt確保該數(shù)值是Int類型。 var Page = parseInt('1') + 1; //Num就是每頁(yè)幾條信息,因?yàn)榱斜砟J(rèn)顯示的是2條,所以這里設(shè)為2,結(jié)合上面的第二頁(yè)實(shí)際上就是從第三條信息開(kāi)始讀取。 var Num = 5; //定義內(nèi)容的Dom位置,也就是讀取出來(lái)的內(nèi)容要添加到哪個(gè)div里面去。 var Dom = jQuery('.mylist'); //使用jQuery的scroll()方法來(lái)監(jiān)聽(tīng)頁(yè)面滾動(dòng) jQuery(window).scroll(function(){ //當(dāng)前窗口和頁(yè)面頂部的距離 var WindowTop = jQuery(window).scrollTop(); //可視窗口區(qū)域高度 var WindowHeight = jQuery(window).outerHeight(); //頁(yè)面的高度 var DocHeight = jQuery(document).height(); //定義一個(gè)開(kāi)關(guān) var load = true; //判斷:(窗口與頁(yè)面頂部距離 + 窗口高度) >= 頁(yè)面的高度(也就是滾動(dòng)到頁(yè)面底部的時(shí)候),并且開(kāi)關(guān)是開(kāi)啟狀態(tài),執(zhí)行ajax加載內(nèi)容 if( ( WindowTop + WindowHeight ) >= DocHeight && load == true ){ //請(qǐng)求地址 var url = '/api.php/list/2/page/' + Page + '/num/' + Num; //設(shè)置開(kāi)關(guān)狀態(tài)為關(guān)閉,防止重復(fù)加載 load = false; //開(kāi)始Ajax提交請(qǐng)求,請(qǐng)求路徑就是Api接口 jQuery.ajax({ //請(qǐng)求類型 type: 'POST', //請(qǐng)求地址 url: url, //返回?cái)?shù)據(jù)類型 dataType: 'json', //請(qǐng)求參數(shù),參考官方Api手冊(cè),在站內(nèi)使用以下參數(shù)會(huì)自動(dòng)獲取 data: { appid: '{pboot:appid}', timestamp: '{pboot:timestamp}', signature: '{pboot:signature}', }, //請(qǐng)求成功 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 ); }); //設(shè)置開(kāi)關(guān)狀態(tài)為開(kāi)啟,進(jìn)行下次加載 load == true; //頁(yè)碼+1 Page += 1; } else { //返回?cái)?shù)據(jù)錯(cuò)誤 jQuery('#More').html('<span>' + Data + '</span>'); } }, error:function( xhr, status, error ){ //將內(nèi)容append到列表 var Html = '加載數(shù)據(jù)錯(cuò)誤'; //在原本的數(shù)據(jù)列表后面添加新的數(shù)據(jù) Dom.append( Html ); } }) } }) </script>
有關(guān)我們服務(wù)的更多信息,請(qǐng)聯(lián)系項(xiàng)目經(jīng)理
15899750475 楊先生