Infinite Scroll 用法記錄

infinite scroll使用說明網站

使用原因：使用bootstrap做網頁時需要在一個頁面中加載大量數據，同時又用card元素進行渲染，所以網頁加載得特別得慢和加載后特別得卡，聽從實驗室同學的建議，使用infiniteScroll進行分頁加載。但在網站上看了很多文章，一部分沒有說明清楚，另一部分歷史悠久，所以沒能找到有用的文檔，后面找到了官方說明（上面的鏈接），並成功使用上（哭）。

---

使用步驟

1.導入infinite-scroll.pkgd.js或infinite-scroll.pkgd.min.js 。

2.初始化組件：

 

<div class="container">
  <article class="post">...</article>
  <article class="post">...</article>
  <article class="post">...</article>
  ...
</div>

 

$('.container').infiniteScroll({
  // options 其他options可以在說明中找到
  path: function(){
         return 'pages?offset='+(this.loadCount+1); //返回下一頁的url，其中this.loadCount時是當前頁數
  }, 
  append: '.post',     // 獲取到的數據將添加到 .post類中的元素
  history: false,       // 不啟用歷史記錄，詳見文檔
});

由於我需要對獲取到的數據進行處理，不直接添加到element中，所以添加如下代碼

$('#course_search').on('load.infiniteScroll', function( event, data ) {
    //data是JSON類型的數據，在初始化組件時，添加option中的responseType: 'json',
    if(data.status == 0){
        //todo
     }
 });

3.可以正常使用了