使用infinite-scroll实现Ghost博文列表的滚动加载

2016-03-14

翟永超

博客攻略

DD的博客全面升级，阅读体验更佳（尤其是系列教程），后续不再通过这里发布新文章，而是改到 www.didispace.com 发布啦，奔走相告！点击直达～

Ghost博客系统默认提供的博文列表为传统的翻页方式（通过点击上一页、下一页等按钮来切换），随着移动客户端的发展，瀑布流式的滚动加载方式得到广泛应用，有效地提高了用户浏览信息的流畅度。下面详述如何通过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}}">&raquo;</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="&nbsp;<i class=\"fa fa-tags\"></i>&nbsp;"}}
            <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}}">&larr; 上一页</a>
    {{/if}}
    <span class="page-number">第 {{page}} 页 &frasl; 共 {{pages}} 页</span>
    {{#if next}}
        <a class="older-posts" href="{{page_url next}}">下一页 &rarr;</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

本博客主题项目地址

本文由程序猿DD 创作
版权声明：自由转载-非商用-非衍生-保持署名 (CC BY-NC-ND 3.0)
原创不易，转载请注明出处，感谢支持！如果本文对您有用，欢迎转发分享！