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>