PHP+InfiniteScroll網頁無限滾動載入資料例項

imcomein發表於2020-01-11

PHP+InfiniteScroll實現網頁無限滾動載入資料例項,實現原理:當捲軸到底離網頁底部一定長度的時候,向後臺傳送頁數並獲取資料。

PHP+InfiniteScroll網頁無限滾動載入資料例項

首先我們在頁面上先放置10條資料,即第一頁,每一項都是p標籤:

<div id="content"> 
    <p><a href="#" target="_blank">1、PHP生成圖片驗證碼</a></p> 
    <p><a href="#" target="_blank">2、jQuery實現table上移下移和置頂</a></p> 
    <p><a href="#" target="_blank">3、基於jQuery的cookie外掛</a></p> 
    <p><a href="#" target="_blank">4、jQuery仿淘寶圖片放大鏡外掛imagezoom</a></p> 
    <p><a href="#" target="_blank">5、簡單jQuery商品屬性選擇表單</a></p> 
   ....... 
</div>


接著我們再放入導航的選擇器#pages和下一頁#next,.loading可不放。

<div id="pages"><a id="next" href="page.php?page=1">下一頁</a></div>
<div class="loading"></div>


然後我們引入jQuery庫、debug.js(除錯)及jquery.infinitescroll.js外掛和js程式碼:

<script type="text/javascript" src="jquery.js"></script>  
<script src="debug.js"></script> 
<script src="jquery.infinitescroll.js"></script>
<script>
$('#content').infinitescroll({ 
    loading: { 
        msgText: "", 
        img: "images/loading.gif", 
        finishedMsg: '沒有新資料了哦...', 
        selector: '.loading' //loading選擇器 
    }, 
    navSelector: "#pages", //導航的選擇器,會被隱藏 
    nextSelector: "#next",//包含下一頁連結的選擇器 
    itemSelector: "p",//你將要取回的選項(內容塊) 
    debug: true, //啟用除錯資訊,若啟用必須引入debug.js 
    dataType: 'html',//格式要和itemSelector保持一致 
    maxPage: 5,//最大載入的頁數 
    //                animate: true, //當有新資料載入進來的時候,頁面是否有動畫效果,預設沒有 
    extraScrollPx: 150, //捲軸距離底部多少畫素的時候開始載入,預設150 
    //                bufferPx: 40, //載入資訊的顯示時間,時間越大,載入資訊顯示時間越短 
    errorCallback: function() { //載入完資料後的回撥函式 
    }, 
    path: function(index) { //獲取下一頁方法 
        return "page.php?p=" + index; 
    }, 
}, 
function(newElements, data, url) { //回撥函式 
    //console.log(data); 
    //alert(url); 
});
</script>


本文轉自: 轉載請註明出處!


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31545264/viewspace-2672947/,如需轉載,請註明出處,否則將追究法律責任。

相關文章