最近一个项目需要用到无限滚动,调查了很多最后用了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.最后
其他的功能还有一些,主要还是需要去看官方文档。