使用infinite-scroll实现Ghost博文列表的滚动加载
Ghost博客系统默认提供的博文列表为传统的翻页方式(通过点击上一页、下一页等按钮来切换),随着移动客户端的发展,瀑布流式的滚动加载方式得到广泛应用,有效地提高了用户浏览信息的流畅度。下面详述如何通过
Infinite Scroll
来改造Ghost博文列表的翻页效果。
Infinite Scroll
Infinite Scroll顾名思义:无限滚动,也称为自动分页、滚动分页和无限分页,是基于jquery的一个插件。可以用来实现滚动页面的时候加载下一页的内容。
实现步骤
- 将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}} |
- 我们可以通过如下代码将原来点击上一页、下一页的翻页模式变成滚动翻页
<script> |
使用解析
- 通过id选择器
$('#posts-content')
选中post列表的循环展示区域,后续加载的内容会被append到这个节点之下 navSelector
参数,用来选中翻页模块的html位置,如上配置即选中了nav标签class为pagination的元素,框架会将这部分内容隐藏(隐藏原来的翻页模块)nextSelector
参数,标出下一页的请求链接,框架根据此获取下一页的请求以发起ajax请求获取下一页的html内容itemSelector
参数,在发起了下一页请求之后,通过这个参数的配置来截取下一页html内容中post部分来填充到navSelector
选中位置的最后
进阶配置
在完成了上面操作之后,还可以做一些进阶的配置,比如修改加载中的文字描述,没有内容之后的提示内容等等。
下面是本站使用的配置,供参考。
<script> |
更多参数配置可参见:infinite-scroll
使用infinite-scroll实现Ghost博文列表的滚动加载的更多相关文章
- 潭州课堂25班:Ph201805201 django 项目 第二十二课 文章主页 新闻列表页面滚动加载,轮播图后台实现 (课堂笔记)
新建static/js/news/index.js文件 ,主要用于向后台发送请求, // 新建static/js/news/index.js文件 $(function () { // 新闻列表功能 l ...
- h5页面列表滚动加载数据
h5列表滚动加载数据很常见,以下分享下今天做的案例: 前言 这个效果实现需要知道三个参数 1. scrollTop -- 滚动条距离顶部的高度 2. scrollHeight -- 当前页面的总高度( ...
- BaseHttpListActivity,几行代码搞定Android Http列表请求、加载和缓存
Android开发中,向服务器请求一个列表并显示是非常常见的需求,但实现起来比较麻烦,代码繁杂. 随着应用的更新迭代,这种需求越来越多,我渐渐发现了实现这种需求的代码的共同点. 于是我将Activit ...
- [WP8.1UI控件编程]Windows Phone大数据量网络图片列表的异步加载和内存优化
11.2.4 大数据量网络图片列表的异步加载和内存优化 虚拟化技术可以让Windows Phone上的大数据量列表不必担心会一次性加载所有的数据,保证了UI的流程性.对于虚拟化的技术,我们不仅仅只是依 ...
- jQuery+php+Ajax文章列表点击加载更多功能
jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...
- phpcms列表分页ajax加载更多
1.在phpcms\modules\content\index.php文件中添加以下函数: /*列表分页ajax加载更多*/ public function homeajaxlist() { if( ...
- Windows Phone 8 实现列表触底加载
[背景] 很多时候在做WP开发的过程中会遇到数据需要分页获取,根据微软官方的推荐方式,建议实现为Market中类似的体验,即滑动到列表的底部的时候加载更多的数据. 这一需求在早起WP7.1时代实现起来 ...
- Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 关于Web中列表页面的加载问题
2017年5月23日,天气晴朗.尽管昨晚睡的不踏实,好在今天心情还不是很糟糕,近来事情颇多,尤其是对于TA的改变,至少目前还是没有习惯,但时间将会解决一切,这点深有体会.此时此刻,又想起了苏东坡的那首 ...
随机推荐
- Hibernate(七)
三套查询之HQL查询(原文再续书接上一回) where子句部分(查询过滤部分) Hibernate的where子句部分能支持的运算符,表达式.函数特别多,用法与sql语句是一样的. 常用的表达式.运算 ...
- sublime text there are no packages available for installation 解决办法
hosts 增加一行 : #50.116.33.29 sublime.wbond.net.
- 使用 Maven 管理项目
最近的练手项目使用的是 Maven 在管理项目,在使用 Maven 管理项目时,三层的开发时分模块开发的,parent-dao-service-web,所有的spring+struts + Hiber ...
- 第192天:js---Date对象属性和方法总结
Date对象构造函数重载方法 一.第一种重载方法---基本 当前时间 //构造函数 - 第一种重载方法:基本 当前时间 console.log('构造函数 - 第一种重载方法:基本 当前时间') da ...
- Underscore.js工具库
Underscore 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象. 他解决了这个问题:“如果我面对一个空白的 HTML ...
- FZU2128_最长子串
题目说给你一个长串,要你选一个最长子串,不包括任何一个给定串为子串. 建立一个自动机,每个点保存的信息为当前这个状态为结尾最长可以有多长? 然后....就可以了... #include <ios ...
- C 程序结构——Day01
C Hello World 实例 C 程序主要包括以下部分: 预处理器指令 函数 变量 语句 & 表达式 注释 让我们看一段简单的代码,可以输出单词 "Hello World&quo ...
- SQL注入漏洞知识总结
目录: 一.SQL注入漏洞介绍 二.修复建议 三.通用姿势 四.具体实例 五.各种绕过 一.SQL注入漏洞介绍: SQL注入攻击包括通过输入数据从客户端插入或“注入”SQL查询到应用程序.一个成功的S ...
- Hive:HQL和Mysql:SQL 的区别
HQL: group by 后面的参数一定要和select非聚集函数一致 where 1 要改成 where 1 = 1
- 解题:SCOI 2014 方伯伯运椰子
题面 很有趣的一道题,看起来是个神奇网络流,其实我们只要知道网络的一些性质就可以做这道题了 因为题目要求流量守恒,所以我们其实是在网络中搬运流量,最终使得总费用减小,具体来说我们可以直接把这种“搬运” ...