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/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/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/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/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/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>
                            

在容器内点击加载更多

可以使用divcontainer包裹住。

  • <a class="pagination__next" href="pages/2.php"></a>
    <script src="https://src.axui.cn/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/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>