PHP+InfiniteScroll網頁無限滾動加載數據怎么實現

這篇文章主要介紹“PHP+InfiniteScroll網頁無限滾動加載數據怎么實現”，在日常操作中，相信很多人在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>

到此，關于“PHP+InfiniteScroll網頁無限滾動加載數據怎么實現”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！