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.可以正常使用了