当前位置:首页 > 建站工具 > 站长工具

Infinite Scroll插件实现无限滚动加载

懒鸟飞 发布于

1、使用场景

对于有很多相似条目需要展示的页面,可以用无限下拉的方式来避免用户通过点击下一页来获取更多内容。比如今日头条网站,打开后,可以一直向下滚动,当滚动到页面底部后,就会加载更多新闻条目。如果你的网速不够快,可以看到底部会偶尔会显示“推荐中”的加载提示。
 

2、实现方式

思路可能很简单:判断滚动到底部,然后执行后台加载数据,获取数据后动态添加dom内容。但是实现起来可能有很多小问题:如何判断是否滚动到底部;是在某个div里滚动还是整个页面滚动;加载等待时的提示信息或动画处理;加载成功后dom的拼接;每次加载时记录第几次加载;加载失败的处理。这是我想到的,当然可能具体实现起来还有很多别的小问题。所以,我找到了Infinite Scroll这个插件。

3、使用

(1)下载文件jquery.infinitescroll.min.js

点击前往官网下载,位置如图所示:
 

(2)引用文件

jqueryinfinitescroll引入到你想要无限滚动加载的页面。
//注意文件的路径
<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=哈哈")


下载地址:https://github.com/metafizzy/infinite-scroll