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>
                            

在容器内点击加载更多

可以使用divcontainer包裹住。

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