Infinite Scroll 无限滚动

infinite-scroll介绍 PLUGIN

infinite-scroll是非常好用的无限加载插件，在Github上人气很高，支持下拉自动加载和点击加载，是自适应开发必备插件。目前使用的版本是v3.0.6，本框架未做任何源码修改。详细使用方法查看插件官网，或者Github。

该插件依赖Jquery，基本使用方法如下：

调用指定的路径页面

核心代码：var nextPenSlugs = ['2.php','3.php','4.php','5.php','6.php',];

<script src="https://src.axui.cn/v1.0/src/plugins/infinite-scroll/infinite-scroll.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function () {
      var nextPenSlugs = [
        '2.php',
        '3.php',
        '4.php',
        '5.php',
        '6.php',
    ];
    function getPenPath() {
        var slug = nextPenSlugs[ this.loadCount ];
        if ( slug ) {
            return 'pages/' + slug;
        }
    }

    var $container = $('.container').infiniteScroll({
        path: getPenPath,
        append: '.post',
        loadOnScroll: false,
        status: '.page-load-status',
    });

    var $viewMoreButton = $('.view-more-button');
    $viewMoreButton.on( 'click', function() {
        $container.infiniteScroll('loadNextPage');
        $container.infiniteScroll( 'option', {
            loadOnScroll: true,
        });
        $viewMoreButton.hide();
    });
    });
</script>

调用顺序页面

核心代码：path: 'pages/{{#}}.html'

<script src="https://src.axui.cn/v1.0/src/plugins/infinite-scroll/infinite-scroll.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function () {

        var $container = $('#container').infiniteScroll({
            path: 'pages/{{#}}.html',
            append: '.post',
            loadOnScroll: false,
            status: '.ax-infinite-status',
        });
        var $viewMoreButton = $('#more');
        $viewMoreButton.on( 'click', function() {
            $container.infiniteScroll('loadNextPage');
            $container.infiniteScroll( 'option', {
                loadOnScroll: true,
            });
            $viewMoreButton.hide();
        });
    });
</script>

向下滚动自动显示更多内容

核心代码：scrollThreshold: 100

<script src="https://src.axui.cn/v1.0/src/plugins/infinite-scroll/infinite-scroll.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function () {

        $('#container').infiniteScroll({
            path: 'pages/{{#}}.html',
            append: '.post',
            scrollThreshold: 100,
            status: '.ax-infinite-status',
        });
    });
</script>

点一下就显示一页

核心代码：scrollThreshold: false,

<script src="https://src.axui.cn/v1.0/src/plugins/infinite-scroll/infinite-scroll.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function () {
        $('#container').infiniteScroll({
            path: 'pages/{{#}}.html',
            append: '.post',
            button: '#more',
            scrollThreshold: false,
            status: '.ax-infinite-status',
        });
    });
</script>

根据超链接直接加载

核心代码：<a class="pagination__next" href="pages/2.php"></a>，样式可以自定义。

<a class="pagination__next" href="pages/2.php"></a>
<script src="https://src.axui.cn/v1.0/src/plugins/infinite-scroll/infinite-scroll.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function () {
    $('#container').infiniteScroll({
            path:'.pagination__next',
            append: '.post',
            scrollThreshold: 100,
            status: '.ax-infinite-status',
        });
    });
</script>

在容器内点击加载更多

可以使用div将container包裹住。

<a class="pagination__next" href="pages/2.php"></a>
<script src="https://src.axui.cn/v1.0/src/plugins/infinite-scroll/infinite-scroll.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function () {
    $('#container').infiniteScroll({
            path: 'pages/{{#}}.html',
            append: '.post',
            button: '.view-more-button',
            scrollThreshold: false,
            status: '.ax-infinite-status',
        });
    });
</script>

简化并不改变URL

核心代码：history: false。注意观察地址栏中的超链接，在下拉过程中插件会默认显示页码，使用这个方法之后可以保持原地址不变。

<a class="pagination__next" href="pages/2.php"></a>
<script src="https://src.axui.cn/v1.0/src/plugins/infinite-scroll/infinite-scroll.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function () {
    $('#container').infiniteScroll({
            path: 'pages/{{#}}.html',
            append: '.post',
            button: '.view-more-button',
            scrollThreshold: false,
            status: '.ax-infinite-status',
        });
    });
</script>