一、前言
现在有很多网站都有这样的交互
1、当你往下浏览页面时,页面会自动去异步加载数据。
无限分页效果 infinite scroll 效果图 –ifxoxo.com
2、在页面下方有一个“点击加载”的按钮,点击之后页面会去加载数据。
无限分页效-infinite scroll 点击加载效果图 –ifxoxo.com
虽说这样的操作用js并不难实现,但是现在有很多成熟的插件,很好很强大,让你可以很简单的就实现这样的功能。
这篇文章就是要介绍其中的一种jquery插件–Infinite Scroll, 用它来实现无限分页。
本文已经同步至我的个人博客站点:
jquery插件(二):Infinite Scroll–无限分页(http://ifxoxo.com/jquery-infinite-scroll.html)
如果想要看实例,可以到以下网址查看:
http://520xmn.com
二、具体用法
1、所需的资源
(1)jquery
既然是jquery插件,肯定是需要先加载jquery的,可以到jquery官网去下载最新的jquery:http://jquery.com/
(2)infinite scroll
到github上去下载最新的infinite scroll插件,地址如下:https://github.com/paulirish/infinite-scroll
在里面找到一个 jquery.infinitescroll.min.js
1 |
|
2、所需的html
(1)有一个容器
当异步加载后,内容可以存在在这里
1 |
|
(2)在页面上需要有一个翻页的连接
(待会需要在js上指明),比如
1 |
|
3、所需的css
在加载的时候,页面会出现一个loading的层(id是#infscr-loading),这个部分的样式需要我们自己去定义,
下面是我自己网站的一个半透明黑色的样式,如果你喜欢,可以直接拿去用
1 |
|
4、js部分–自动加载
前面的部分都准备之后,js部分其实是很容易的,直接调用infinitescroll方法,指明一些参数就行。(参数列表详见一、6)
如果想要看示例,可以查看520xmn.com,里面的无限分页就是用了这个插件.
1 |
|
5、js部分–点击后再加载
infinite scroll默认是自动加载的,但是在某些情况下,我们希望的是用户点击“加载”按钮之后,才去异步加载数据,实现起来也不难。
就在需要实现点击后再加载的地方,加上类似的代码
1 |
|
6、参数说明
infinitescroll还有很多强大的参数支持
这是从 https://github.com/paulirish/infinite-scroll翻译过来的,如果觉得翻译的不对,可以自行查询原版。
参数 | 默认值 | 作用 |
debug | false | 是否打开debug模式 |
nextSelector | “” | 翻页的链接 |
navSelector | “” | 页面分页元素,成功后会被隐藏 |
contentSelector | null | 指定之后,异步加载的内容会用这个设置过滤一下 |
itemSelector | null | ajax回来之后,每一项的selecter 比如每篇文章都有item这个class |
animate | false | 加载完毕是否采用动态效果 |
pathParse | underfine | 切割nextSelector的url的规则, 提取出需要加载第几页 如:["/index?key1=${val1 }&key2=${val2}&page=",""] |
dataType | html | 加载回来的数据格式,支持”json|html” |
bufferPx | 40 | 提示语展现的时长,数字越大,展现时间越短 |
infid | 0 | 示例的id,用于区分页面多次用到这个插件 |
7、其他
(1)操作
infiniter scroll还提供暂停和恢复操作,
如
1 |
|
(2)状态
提供了几个状态供我们去查询
isDuringAjax
isInvalidPage
isDestroyed //处在destroyed状态?
isDone //加载完毕?
isPaused //处在暂停状态?
currPage //当前页数
我们可以在自定义函数里面去查询
1 |
|
p.s
本文已经同步至我的个人博客站点:
jquery插件(二):Infinite Scroll–无限分页(http://ifxoxo.com/jquery-infinite-scroll.html)
如果想要看实例,可以到以下网址查看:
http://520xmn.com
转自:http://ifxoxo.com/jquery-infinite-scroll.html