zoukankan      html  css  js  c++  java
  • 使用infinite-scroll实现Ghost博文列表的滚动加载

    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

    本博客主题项目地址

  • 相关阅读:
    java线程间的协作
    java线程间的共享
    java多线程基础API
    java并发编程基础概念
    如何设计一套规则引擎系统
    Stream—一个早产的婴儿
    Java函数式编程的前生今世
    关于微服务划分的一些思考
    如何更优雅的给控制器 “减负”
    PHP简洁之道
  • 原文地址:https://www.cnblogs.com/kkdn/p/9435473.html
Copyright © 2011-2022 走看看