1、使用场景
对于有很多相似条目需要展示的页面，可以用无限下拉的方式来避免用户通过点击下一页来获取更多内容。比如今日头条网站，打开后，可以一直向下滚动，当滚动到页面底部后，就会加载更多新闻条目。如果你的网速不够快，可以看到底部会偶尔会显示“推荐中”的加载提示。
今日头条.png
2、实现方式
思路可能很简单：判断滚动到底部，然后执行后台加载数据，获取数据后动态添加dom内容。但是实现起来可能有很多小问题：如何判断是否滚动到底部；是在某个div里滚动还是整个页面滚动；加载等待时的提示信息或动画处理；加载成功后dom的拼接；每次加载时记录第几次加载；加载失败的处理。这是我想到的，当然可能具体实现起来还有很多别的小问题。所以，我找到了Infinite Scroll这个插件。
3、使用
（1）下载文件jquery.infinitescroll.min.js
点击前往官网下载，位置如图所示：
Infinite Scroll.png
（2）引用文件
将jquery和infinitescroll引入到你想要无限滚动加载的页面。
//注意文件的路径
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.infinitescroll.min.js"></script>
（3）页面结构
<!--tasks是最外层的元素，所有加载的内容都会放在这个元素内-->
<div id='tasks' style="overflow-y: auto;">
<!--这是显示的每个条目的内容，保证都有一个共同的class属性，不必是item-->
<div class="item">条目1</div>
<div class="item">条目2</div>
......
<div class="item">条目n</div>
<!--在最后，要加上一个导航，每次滚到底部，就会触发这个url去加载数据-->
<div id="navigation">
<a href="loadmore?page=2" ></a>
</div>
</div>
（4）JavaScript代码
$("#tasks").infinitescroll({
navSelector : "#navigation", //页面分页元素--成功后自动隐藏
nextSelector : "#navigation a",
itemSelector : ".item",
animate : true,
debug : false, //调试的时候，可以打开
maxPage : 100, //加载次数
extraScrollPx : 200,
loading: {
msgText:"",
finished: function(){
//加载完成后执行
},
finishedMsg: '',//最后加载完成后的提示语
},
behavior: 'local',
binder: $('#tasks')
});
这里，是绑定的$('#tasks')这个对象，也就是说，在这个元素内进行滚动无限加载。如果是整个页面滚动，就要绑定window这个对象。官方文档是这么说的：
To scroll inside an element having overflow, use the local behavior.
$('.selector').infinitescroll({
behavior: 'local',
binder: $('.selector'),
// scroll on this element rather than on the window
// other options
});
注意的是，要想在某一元素内滚动，必须为该元素设置overflow样式属性。这是最简单的配置参数，Infinite Scroll提供了非常多的回调以及监控函数。
（5）配置说明
因为很多参数都没有用到，没有深入去研究，如果基础配置不能满足需求，可以自行去调试研究。
参考：Infinite Scroll无限分页滚动使用示例
$('.selector').infinitescroll({
loading: {//加载时的配置
finished: undefined,//每次加载完成后执行，可以自定义function
finishedMsg: "加载完成",//加载完成后的提示语，可以为空
img: null,//自定义loadding的动画图
msg: null,
msgText: "正在加载",//加载时的提示语
selector: null,
speed: 'fast',
start: undefined
},
state: {
isDuringAjax: false,
isInvalidPage: false,
isDestroyed: false,
isDone: false, // For when it goes all the way through the archive.
isPaused: false,
currPage: 1
},
behavior: undefined,
binder: $(window), // 在哪个元素内滚动
nextSelector: "div.navigation a:first",
navSelector: "div.navigation",
contentSelector: null, // rename to pageFragment
extraScrollPx: 150,
itemSelector: "div.post",
animate: false,//加载完毕是否采用动态效果
pathParse: undefined,
dataType: 'html',
appendCallback: true,
bufferPx: 40,
errorCallback: function () { },
infid: 0, //Instance ID
pixelsFromNavToBottom: undefined,
path: undefined, // Can either be an array of URL parts (e.g. ["/page/", "/"]) or a function that accepts the page number and returns a URL
maxPage:undefined // to manually control maximum page (when maxPage is undefined, maximum page limitation is not work)
});
（6）其他
问题一：如果是在js中配置导航元素的url地址，最好将page参数放在第一位，否则可能导致插件计算页码出错。如：
$("#nav-a").attr("href","loadmore?page=2&keyword=哈哈")
网友评论