手機網站常用的功能，就是捲動後自動載入下一頁。在桌面版，我們可以點選頁碼很方便，但手機的手指粗，要精確的點選有困擾，故常用自動捲動這個特效，也就是當網頁捲到底的時侯，自動載入下一頁。
有人用Jquery寫出了這個套件「infinitescroll 」, 挺好用的，但網路說明又太簡單，又沒有針對資料庫讀取換頁做說明，摸索了一下，我自己寫了教學，本篇是以php網頁為例子寫出來。
一般例子是用
test1.html
test2.html
test3.html
....
我的網頁換頁是用php的參數，o是不相關的參數，pageID則是我們要的換頁參數，會從資料庫(比如mysql)讀入不同頁的資訊，所以比較複雜，但這也是一般php網頁會用的情況，故特此說明
test.php?o=t&pageID=1
test.php?o=t&pageID=2
test.php?o=t&pageID=3
.....
1. 首先，下載套件 infinitescroll 套件，到 https://github.com/infinite-scroll/infinite-scroll 點選 Clone or Download
2. 解壓縮案，我們只需要 jquery.infinitescroll.min.js 這一個檔案，把它拷貝到網頁裏的資料夾所要用的位置，以我為例，我習慣放在js資料夾裏
3. 回到網頁的程式碼裏面，打開 test.php ，在<head></head>先插入jquery(有的大陸人說 jquery 1.8.3版本最穩定，所以我採用)，再插入jquery.infinitescroll.min.js
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.infinitescroll.min.js"></script>
4.再插入以下代碼，說明部份我用橘色表示，網友請自行參照
<script type="text/javascript">
$(document).ready(function(){
/*自動載入捲動項目*/
$(function() {
$('#contentserial').infinitescroll({
loading: {
finishedMsg : "<em>這已經是最後一個項目了.</em>",/*最後一頁顯示的字*/
msgText : "<em>載入更多項目...</em>",/*自動載入中的暫時顯示的字*/
speed : 'fast',/*載入速度*/
},
state: {
currPage: <?php echo $currentPage;//目前網頁。很多教學在此用預設值1，但因為如果有人從pageID=2開始，就不能從1數了，故用可變動參數較好。我用php的PEAR模組的 pager套件指定一個參數目前網頁表示$currentPage然後預設是1，但仍可以自由變動，在這裏網友們也可以不靠套件手動指定，PEAE的pager套件就不多解釋，它只是一種換頁的套件，網友們可自行寫其他程式替代這個$currentPage參數 ?>
},
navSelector : "#nextscroll:last",/*讀入下一網頁的連結，稍後解釋*/
nextSelector : "a#nextscroll:last",/*讀入下一網頁的連結，稍後解釋*/
itemSelector : "#contentserial li", /*你要讀入的內容物是什麼，在此例子是讀入下一頁的li，並插入#contentserial裏面*/
maxPage : <?php $totalnumpages = $pager->numpages(); if ($totalnumpages < 1) $totalnumpages = '1'; echo $totalnumpages; //網頁多最是幾頁。在此我用PEAE pager內建的總頁數計算功能，指定參數為$totalnumpages，至少為1。網友在此可以寫其他程式來自行計算，可以不用照抄，照抄的話，因為你沒有用pager套件，所以也是無用的 ?>,
dataType : "php",/*檔案名稱*/
animate : false, /*動畫效果。這個一定要取消，否則在有資料庫多欄讀入的網頁會出錯，會亂跳*/
extraScrollPx : 0, /*刷入新網頁後，要自動往上移多少空間，我選擇不要*/
pixelsFromNavToBottom : 30, /*距離滑到最底部的距離多少時要開始啟動，在此指定30px*/
path: function(index) {/*path是infinite scroll內建的下一頁換頁功能，這邊有點複雜，很重要！！！*/
<?php
if (empty($_GET['pageID']))/*沒有PageID時，比如 test.php?o=t ，補上為test.php?o=t&pageID= */
$nextscrollpage_path = $_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING'].'&pageID=';
else {/*如果有pageID了，舉例第3頁，那麼要把pageID=3的3給刪除掉，用str_replace功能去跑，比如test.php?o=t&pageID=3 要替換為 test.php?o=t&pageID= */
$nextscrollpage_path = $_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING'];
$nowpageID_path = '&pageID='.$_GET['pageID'];
$nextscrollpage_path = str_replace($nowpageID_path,'&pageID=',$nextscrollpage_path);
}
?>
return "<?php echo $nextscrollpage_path; ?>" + index; /*index原理是根據目前state:currPage的頁數自動+1，這是infinite scroll內建的自動累加功能。所以舉例第3頁產生的網頁下一頁參數會是4(index)，下一頁就是test.php?o=t&pageID=4*/
}
});
});
});
</script>
5. 以上head設定好之後，我們來考慮文本內容如何插入的，在此簡單說明，比方說，我們要在<ul id="contentserial">裏面，無限增加捲動li的數量。意思是<ul>不變，但裏面的<li>會一直增加
<ul id="contentserial">
<li></li>
<li></li>
<li></li>
......下一頁....下一頁....等等
</ul>
所以在上面的步驟4會出現以下這行，就是這個原因
itemSelector : "#contentserial li",
6.在ul之後，貼上下一頁的連結。意是思，如果目前在第3頁，就要顯示<a href="test.php?o=t&pageID=4">
<?php
if (empty($_GET['pageID'])) //如果是第一頁，又無pageID參數，就補足pageID=2
$nextscrollpage = $_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING'].'&pageID=2';
else {//如果是其他頁，比如test.php?o=t&pageID=3，就置換成test.php?o=t&pageID=4
$nextscrollpage = $_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING'];//舉例test.php?o=t&pageID=3
$nextpagenumber = $_GET['pageID'] + 1;//舉例 3+1 = 4
$nextpageID = '&pageID='.$nextpagenumber;//$nextpageID = '&pageID=4'
$nowpageID = '&pageID='.$_GET['pageID'];$nowtpageID = '&pageID=3
$nextscrollpage = str_replace($nowpageID,$nextpageID,$nextscrollpage);//用$nextpageID取代$nowtpageID
}
//一定要填的下一頁的連結，至於pageID要怎麼連續變化就交給path功能去解決了
//如果資料有超出兩頁才需要換頁
if ($totalnumpages >= 2){//如果總頁數大於等於2，才需要讀入下一頁，這裏的$totalnumpages(總頁數)參數由網友們自行設定，我是交給PEAR套件的pager來設定
echo "
<ul class=\"content-ul\"><li><div align=\"center\"><a id=\"nextscroll\" href=\"$nextscrollpage\">載入下個頁面<br>⇩</div></a></li></ul>
";
/*解譯步驟4的設定 navSelector : "#nextscroll:last", 指的是id nextscroll (設定選擇最後一個last，以免#nextscroll重覆載入太多個而不知選哪一個)*/
/*解譯步驟4的設定 nextSelector : "a#nextscroll:last",指的是a 連結id nextscroll(設定選擇最後一個last，以免#nexts載入太多個而不知選哪一個)*/
}
?>
不多解釋了，完成！
花了我3天搞懂，真累，程式碼完整貼上了，還有不懂的請網友們請自行去參考推敲
留言列表
