0712-2888027 189-8648-0214
微信公眾號(hào)

孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號(hào)

當(dāng)前位置:主頁(yè) > 技術(shù)支持 > Javascript/JQuery > 【無(wú)限滾動(dòng)加載數(shù)據(jù)】—infinite-scroll插件的使用

【無(wú)限滾動(dòng)加載數(shù)據(jù)】—infinite-scroll插件的使用

時(shí)間:2016-06-17來(lái)源:風(fēng)信官網(wǎng) 點(diǎn)擊: 1866次
網(wǎng)上對(duì)于infinite-scroll插件使用的例子不多。但由于它的出現(xiàn),鼓吹了瀑布流形式的頁(yè)面展示方式,所以不得不了解了解這種新的分頁(yè)方式。

官網(wǎng)上有對(duì)infinite-scroll的詳細(xì)描述,但一般人即使看未必看得懂,看得懂未必就調(diào)試成功。所以借今晚有點(diǎn)時(shí)間,把跑通的例子供大家借鑒。

一.無(wú)限滾動(dòng)概念

首先,它是基于jQuery的,另外還要明白無(wú)限滾動(dòng)的概念:無(wú)限滾動(dòng)的實(shí)現(xiàn)原理就是當(dāng)你在網(wǎng)頁(yè)上的滾動(dòng)條滾動(dòng)到離網(wǎng)頁(yè)底部一定長(zhǎng)度的時(shí)候,觸發(fā)某ajax函數(shù)(infinite-scroll內(nèi)已經(jīng)封裝好),往后臺(tái)加載文件或者數(shù)據(jù),又或者從外部引入靜態(tài)html形式文件。

二.探討infinite-scroll

1.從網(wǎng)頁(yè)頭引入兩個(gè)js文件,注意必須先放jquery的

    <script src="css/infinite-scroll/jquery-1.6.4.js"></script>  
    <script src="css/infinite-scroll/jquery.infinitescroll.js"></script>  

2.之后在網(wǎng)頁(yè)頭自己寫(xiě)一個(gè)js腳本

    <script>  
    $(document).ready(function (){  
      $("#container").infinitescroll({  
            navSelector: "#navigation",      //頁(yè)面分頁(yè)元素--本頁(yè)的導(dǎo)航,意思就是一個(gè)可以觸發(fā)ajax函數(shù)的模塊  
            nextSelector: "#navigation a",  //下一頁(yè)的導(dǎo)航  
            itemSelector: ".scroll " ,             //此處我用了類(lèi)選擇器,選擇的是你要加載的那一個(gè)塊(每次載入的數(shù)據(jù)放的地方)        
            animate: true,                          //加載時(shí)候時(shí)候需要?jiǎng)赢?huà),默認(rèn)是false  
            maxPage: 3,                            //最大的頁(yè)數(shù),也就是滾動(dòng)多少次停。這個(gè)頁(yè)碼必須得要你從數(shù)據(jù)庫(kù)里面拿         
        });  
    });   
       </script>  

3.或許你看到這里還是不太清楚網(wǎng)頁(yè)怎么定義,這里給出我的demo,希望可以有幫助

    <%@ page language="java" contentType="text/html; charset=utf-8"  
        pageEncoding="utf-8"%>  
    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf-8">  
    <title>無(wú)限翻頁(yè)效果</title>  
    <script src="css/infinite-scroll/jquery-1.6.4.js"></script>  
    <script src="css/infinite-scroll/jquery.infinitescroll.js"></script>  
    <script src="css/infinite-scroll/test/debug.js"></script>  
     <script>  
     $(document).ready(function (){               //別忘了加這句,除非你沒(méi)學(xué)Jquery  
          $("#container").infinitescroll({  
                navSelector: "#navigation",     //頁(yè)面分頁(yè)元素--成功后自動(dòng)隱藏  
                nextSelector: "#navigation a",  
                itemSelector: ".scroll " ,             
                animate: true,  
                maxPage: 3,                                                  
            });  
     });   
        </script>  
    </head>  
    <body>  
        <div id="container">            <!-- 容器 -->  
            <div class="scroll">         <!-- 每次要加載數(shù)據(jù)的數(shù)據(jù)塊-->  
            第一頁(yè)內(nèi)容第一頁(yè)內(nèi)容<br>  
            第一頁(yè)內(nèi)容<br>第一頁(yè)內(nèi)容<br>第一頁(yè)內(nèi)容<br>  
            第一頁(yè)內(nèi)容<br>第一頁(yè)內(nèi)容<br>第一頁(yè)內(nèi)容<br>  
            第一頁(yè)內(nèi)容<br>第一頁(yè)內(nèi)容<br>第一頁(yè)內(nèi)容  
            </div>  
        </div>  
            <div id="navigation" align="center">         <!-- 頁(yè)面導(dǎo)航-->  
            <a href="user/list?page=1"></a>        <!-- 此處可以是url,可以是action,要注意不是每種html都可以加,是跟當(dāng)前網(wǎng)頁(yè)有相同布局的才可以。另外一個(gè)重要的地方是page參數(shù),這個(gè)一定要加在這里,它的作用是指出當(dāng)前頁(yè)面頁(yè)碼,沒(méi)加載一次數(shù)據(jù),page自動(dòng)+1,我們可以從服務(wù)器用request拿到他然后進(jìn)行后面的分頁(yè)處理。-->  
        </div>  
    </body>  
    </html>  

三.細(xì)微部分

1.js函數(shù)里還可定義的其他屬性:

debug        : true,                                         //用于調(diào)試,如果需要用到,只需在網(wǎng)頁(yè)頭引入官網(wǎng)demo里的debug.js文件                  
loadingImg   : "/img/loading.gif",                   //加載時(shí)候顯示的進(jìn)度條,用戶可以自定義       
loadingText  : "Loading new posts...",            //加載時(shí)顯示的文字     
extraScrollPx: 50,                                            //離網(wǎng)頁(yè)底部多少像素時(shí)觸發(fā)ajax  
donetext     : "I think we've hit the end, Jim" ,     //加載完數(shù)據(jù)(到達(dá)底部時(shí))顯示的文字提醒  
errorCallback: function(){},                             //加載完數(shù)據(jù)后的回調(diào)函數(shù),可選   

其他屬性暫不作過(guò)多介紹


2.數(shù)據(jù)的載入方式

①html  :如果你已經(jīng)有固定的數(shù)據(jù)塊,可以放到html里面加載靜態(tài)頁(yè)面。

②json  :可以用后臺(tái)返回json的方式,返回的時(shí)候要指定temple里面的html模版,否則會(huì)出錯(cuò)。

③我上面例子用的其實(shí)也是json,前臺(tái)在Action層把數(shù)據(jù)取出后再用StringBuilder拼裝成html格式的字符串返回前臺(tái)。(個(gè)人習(xí)慣)

3.數(shù)據(jù)分頁(yè)方式

本例用hibernate進(jìn)行數(shù)據(jù)分頁(yè)。
欄目列表
推薦內(nèi)容
熱點(diǎn)內(nèi)容
展開(kāi)