使用infinite-scroll实现Ghost博文列表的滚动加载
2017-06-26 14:07
686 查看
Ghost博客系统默认提供的博文列表为传统的翻页方式(通过点击上一页、下一页等按钮来切换),随着移动客户端的发展,瀑布流式的滚动加载方式得到广泛应用,有效地提高了用户浏览信息的流畅度。下面详述如何通过
infinite-scroll项目地址
在循环获取posts列表的页面上引入
注意:
尝试一下最简配置,若我们的页面结构如下
我们可以通过如下代码将原来点击上一页、下一页的翻页模式变成滚动翻页
下面是本站使用的配置,供参考。
更多参数配置可参见:infinite-scroll
本博客主题项目地址
Infinite Scroll来改造Ghost博文列表的翻页效果。
Infinite Scroll
Infinite Scroll顾名思义:无限滚动,也称为自动分页、滚动分页和无限分页,是基于jquery的一个插件。可以用来实现滚动页面的时候加载下一页的内容。infinite-scroll项目地址
实现步骤
将jquery.infinitescroll.min.js拷贝到你的主题目录下
在循环获取posts列表的页面上引入
jquery.infinitescroll.min.js文件
注意:
jquery.infinitescroll.min.js必须在jquery引入之后
<script src="{{asset "js/jquery.infinitescroll.min.js"}}"></script>
尝试一下最简配置,若我们的页面结构如下
{{#foreach posts}} <article class="{{post_class}}"> {{!有封面的时候展示封面}} {{#if image}} <a class="post-pic hidden-xs" href="{{url}}" style="background-image: url({{image}});"></a> {{/if}} <header class="post-header"> <h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2> </header> <section class="post-excerpt"> <p>{{excerpt characters="140"}} <a class="read-more" href="{{url}}">»</a></p> </section> <footer class="post-meta"> {{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="{{author.name}}" nopin="nopin" />{{/if}} {{author}} {{tags prefix=" <i class=\"fa fa-tags\"></i> "}} <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="YYYY年MM月DD日"}}</time> </footer> </article> {{/foreach}} <nav class="pagination" role="navigation"> {{#if prev}} <a class="newer-posts" href="{{page_url prev}}">← 上一页</a> {{/if}} <span class="page-number">第 {{page}} 页 ⁄ 共 {{pages}} 页</span> {{#if next}} <a class="older-posts" href="{{page_url next}}">下一页 →</a> {{/if}} </nav>
我们可以通过如下代码将原来点击上一页、下一页的翻页模式变成滚动翻页
<script> $(document).ready(function (){ $('#posts-content').infinitescroll({ navSelector : "nav.pagination", nextSelector : "nav.pagination a:last", itemSelector : "article" }); }); </script>
使用解析
通过id选择器$('#posts-content')选中post列表的循环展示区域,后续加载的内容会被append到这个节点之下
navSelector参数,用来选中翻页模块的html位置,如上配置即选中了nav标签class为pagination的元素,框架会将这部分内容隐藏(隐藏原来的翻页模块)
nextSelector参数,标出下一页的请求链接,框架根据此获取下一页的请求以发起ajax请求获取下一页的html内容
itemSelector参数,在发起了下一页请求之后,通过这个参数的配置来截取下一页html内容中post部分来填充到
navSelector选中位置的最后
进阶配置
在完成了上面操作之后,还可以做一些进阶的配置,比如修改加载中的文字描述,没有内容之后的提示内容等等。下面是本站使用的配置,供参考。
<script> $(document).ready(function (){ $('#posts-content').infinitescroll({ navSelector : "nav.pagination", nextSelector : "nav.pagination a:last", itemSelector : "article", animate : false, bufferPx: 5, extraScrollPx: 50, loading: { speed: 'fast', selector: null, msgText: '加载中...', finishedMsg:'<div class="post-loading">没有更多了</div>' } }); }); </script>
更多参数配置可参见:infinite-scroll
本博客主题项目地址
相关文章推荐
- 【无限滚动加载数据】—infinite-scroll插件的使用---------下拉加载数据、无线滚动
- AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
- AngularJS中的滚动加载,通过ngInfiniteScroll实现下拉滚动加载
- AngularJS中的滚动加载,通过ngInfiniteScroll实现下拉滚动加载
- AngularJS中的滚动加载,通过ngInfiniteScroll实现下拉滚动加载
- ionic实现上拉加载更多(组件 ion-infinite-scroll使用,以及多次加载的问题)
- 【无限滚动加载数据】—infinite-scroll插件的使用
- 【无限滚动加载数据】—infinite-scroll插件的使用
- 【无限滚动加载数据】—infinite-scroll插件的使用
- infinite-scroll插件无限滚动加载数据的使用
- 使用vue-infinite-scroll实现无限滚动效果
- 使用自定义的item、Adapter和AsyncTask、第三方开源框架PullToRefresh联合使用实现自定义的下拉列表(从网络加载图片显示在item中的ImageView)
- 使用jquery实现页面滚动到底部自动加载新的信息
- 使用jQuery或者原生js实现鼠标滚动加载页面新数据
- 使用jquery实现页面滚动到底部自动加载新的信息
- 滚动加载|页面滑到底部加载数据|jquery.endless-scroll插件|使用demo
- 使用jquery实现页面滚动到底部自动加载新的信息
- 使用jquery实现页面滚动到底部自动加载新的信息
- jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
- jquery.scrollLoading实现图片滚动加载