PHP+InfiniteScroll網(wǎng)頁(yè)無(wú)限滾動(dòng)加載數(shù)據(jù)怎么實(shí)現(xiàn)

這篇文章主要介紹“PHP+InfiniteScroll網(wǎng)頁(yè)無(wú)限滾動(dòng)加載數(shù)據(jù)怎么實(shí)現(xiàn)”，在日常操作中，相信很多人在PHP+InfiniteScroll網(wǎng)頁(yè)無(wú)限滾動(dòng)加載數(shù)據(jù)怎么實(shí)現(xiàn)問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”P(pán)HP+InfiniteScroll網(wǎng)頁(yè)無(wú)限滾動(dòng)加載數(shù)據(jù)怎么實(shí)現(xiàn)”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

實(shí)現(xiàn)原理：當(dāng)滾動(dòng)條到底離網(wǎng)頁(yè)底部一定長(zhǎng)度的時(shí)候，向后臺(tái)發(fā)送頁(yè)數(shù)并獲取數(shù)據(jù)。

首先我們?cè)陧?yè)面上先放置10條數(shù)據(jù)，即第一頁(yè)，每一項(xiàng)都是p標(biāo)簽：

<div id="content"> 
    <p><a href="#" target="_blank">1、PHP生成圖片驗(yàn)證碼</a></p> 
    <p><a href="#" target="_blank">2、jQuery實(shí)現(xiàn)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、簡(jiǎn)單jQuery商品屬性選擇表單</a></p> 
   ....... 
</div>

接著我們?cè)俜湃雽?dǎo)航的選擇器#pages和下一頁(yè)#next，.loading可不放。

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

然后我們引入jQuery庫(kù)、debug.js（調(diào)試）及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: '沒(méi)有新數(shù)據(jù)了哦...', 
        selector: '.loading' //loading選擇器 
    }, 
    navSelector: "#pages", //導(dǎo)航的選擇器，會(huì)被隱藏 
    nextSelector: "#next",//包含下一頁(yè)鏈接的選擇器 
    itemSelector: "p",//你將要取回的選項(xiàng)(內(nèi)容塊) 
    debug: true, //啟用調(diào)試信息，若啟用必須引入debug.js 
    dataType: 'html',//格式要和itemSelector保持一致 
    maxPage: 5,//最大加載的頁(yè)數(shù) 
    //                animate: true, //當(dāng)有新數(shù)據(jù)加載進(jìn)來(lái)的時(shí)候，頁(yè)面是否有動(dòng)畫(huà)效果，默認(rèn)沒(méi)有 
    extraScrollPx: 150, //滾動(dòng)條距離底部多少像素的時(shí)候開(kāi)始加載，默認(rèn)150 
    //                bufferPx: 40, //載入信息的顯示時(shí)間，時(shí)間越大，載入信息顯示時(shí)間越短 
    errorCallback: function() { //加載完數(shù)據(jù)后的回調(diào)函數(shù) 
    }, 
    path: function(index) { //獲取下一頁(yè)方法 
        return "page.php?p=" + index; 
    }, 
}, 
function(newElements, data, url) { //回調(diào)函數(shù) 
    //console.log(data); 
    //alert(url); 
});
</script>

到此，關(guān)于“PHP+InfiniteScroll網(wǎng)頁(yè)無(wú)限滾動(dòng)加載數(shù)據(jù)怎么實(shí)現(xiàn)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！