无限滚动插件Infinite Scroll

最近一个项目需要用到无限滚动，调查了很多最后用了Infinite Scroll这个插件。

优点

①ajax的函数是内部已经封装好，所有不需要单独的调用。

②后台返回的形式既可以是静态html形式也可以说json  。

使用infinite-scroll

安装引用就不写了，可以去官网自己看。

1.主的HTML部分

<div class="container"> 

</div>
<div class="page-load-status">
    <div class="loader-ellips infinite-scroll-request"><!-- 在加载时显示 -->
        <span class="loader-ellips__dot"></span>
        <span class="loader-ellips__dot"></span>
        <span class="loader-ellips__dot"></span>
        <span class="loader-ellips__dot"></span>
    </div>
    <p class="infinite-scroll-last">End of content</p><!-- 最后一页加载完了显示 -->
    <p class="infinite-scroll-error">No more pages to load</p><!-- 加载错误的时候显示 -->
</div>

2.主的css部分

body {
  font-family: sans-serif;
  line-height: 1.4;
  font-size: 18px;
  margin: 0 auto;
}

.page-load-status {
  display: none;
  padding-top: 20px;
  border-top: 1px solid #DDD;
  text-align: center;
  color: #777;
}
.loader-ellips {
  font-size: 20px; /* change size here */
  position: relative;
  width: 4em;
  height: 1em;
  margin: 10px auto;
}

.loader-ellips__dot {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  background: #555; /* change color here */
  position: absolute;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {
  left: 0;
}
.loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips__dot:nth-child(4) { left: 3em; }

@keyframes reveal {
  from { transform: scale(0.001); }
  to { transform: scale(1); }
}

@keyframes slide {
  to { transform: translateX(1.5em) }
}

.loader-ellips__dot:nth-child(1) {
  animation-name: reveal;
}

.loader-ellips__dot:nth-child(2),
.loader-ellips__dot:nth-child(3) {
  animation-name: slide;
}

.loader-ellips__dot:nth-child(4) {
  animation-name: reveal;
  animation-direction: reverse;
}

3.页的HTML部分

<div class="container">
    <article class="post">
        <!-- 内容 --> 
    </article>
</div>

4.主的js部分，也是最主要的部分

var infScroll = new infinitescroll('.container', {
    path: function () { 
        var maxPage = 10; //最大页数
        if (this.loadCount < maxPage) {
            var pageNumber = this.loadCount + 1;
            return '/demo/image?page=' + pageNumber;
        }
    },
    append: '.post', // 把页面显示出来的方式,默认是false
//  responseType: 'text', // 设置页面请求返回的响应类型 text时是json
    prefill: true, //预填充 ，加上后append属性必须。
    status: '.page-load-status',
    hideNav: '.pagination',
    history: false, //更改浏览器历史记录和URL。
    scrollThreshold: 100//设置滚动条与滚动区域之间的距离，默认是400
})

5.几个常用的事件

// 页面请求加载下一页时触发。
infScroll.on('request', function (path) {

})

// 页面附加到容器前触发。
infScroll.on('load', function (response, path) {

});

// 页面附加到容器后触发。 append: '.post'有效。
infScroll.on('append', function (response, path, items) {

});

6.最后

其他的功能还有一些，主要还是需要去看官方文档。