Infinite Scroll 无限滚动

infinite-scroll介绍 PLUGIN

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

调用指定的路径页面

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

<script src="https://src.axui.cn/v2.0/dist/plugins/infinite-scroll/infinite-scroll.min.js" type="text/javascript"></script>
<script type='text/javascript'>
document.addEventListener("DOMContentLoaded", 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 = new InfiniteScroll('#container', {
        path: getPenPath,
        append: '.post',
        loadOnScroll: false,
        status: '.ax-infinite-status',
    });

     var viewMoreButton = document.querySelector('#more');
    viewMoreButton.onclick = function () {
        container.loadNextPage();
        container.option({
            loadOnScroll: true,
        })
        this.style.display = 'none';
    } 
});
</script>

调用顺序页面

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

<script src="https://src.axui.cn/v2.0/dist/plugins/infinite-scroll/infinite-scroll.min.js" type="text/javascript"></script>
<script type='text/javascript'>
document.addEventListener("DOMContentLoaded", function () {

    var container = new InfiniteScroll('#container', {
        path: 'pages/{{#}}.php',
        append: '.post',
        loadOnScroll: false,
        status: '.ax-infinite-status',
    });

    var viewMoreButton = document.querySelector('#more');
    viewMoreButton.onclick = function () {
        container.loadNextPage();
        container.option({
            loadOnScroll: true,
        })
        this.style.display = 'none';
    }

});
</script>

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

核心代码：scrollThreshold: 100

<script src="https://src.axui.cn/v2.0/dist/plugins/infinite-scroll/infinite-scroll.min.js" type="text/javascript"></script>
<script type='text/javascript'>
document.addEventListener("DOMContentLoaded", function () {

    var container = new InfiniteScroll('#container', {
        path: 'pages/{{#}}.php',
        append: '.post',
        scrollThreshold: 100,
        status: '.ax-infinite-status',
    });

});
</script>

点一下就显示一页

核心代码：scrollThreshold: false,

<script src="https://src.axui.cn/v2.0/dist/plugins/infinite-scroll/infinite-scroll.min.js" type="text/javascript"></script>
<script type='text/javascript'>
document.addEventListener("DOMContentLoaded", function () {

    var container = new InfiniteScroll('#container', {
        path: 'pages/{{#}}.php',
        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/v2.0/dist/plugins/infinite-scroll/infinite-scroll.min.js" type="text/javascript"></script>
<script type='text/javascript'>
document.addEventListener("DOMContentLoaded", function () {

    var container = new InfiniteScroll('#container', {
        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/v2.0/dist/plugins/infinite-scroll/infinite-scroll.min.js" type="text/javascript"></script>
<script type='text/javascript'>
document.addEventListener("DOMContentLoaded", function () {

    var container = new InfiniteScroll('#container', {
        path: 'pages/{{#}}.php',
        append: '.post',
        button: '#more',
        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/v2.0/dist/plugins/infinite-scroll/infinite-scroll.min.js" type="text/javascript"></script>
<script type='text/javascript'>
document.addEventListener("DOMContentLoaded", function () {

    var container = new InfiniteScroll('#container', {
        path: 'pages/{{#}}.php',
        append: '.post',
        button: '#more',
        scrollThreshold: false,
        //loadingImg   : "/images/loading.gif",
        status: '.ax-infinite-status',
        history: false,//切换页面就不会改变url,其他的replase和push能改变url
        historyTitle: true,//到子页面的时候，网页标题变为子页面的标题
    });

});
</script>