Infinite Scroll–无限分页
来源:互联网 发布:小米万能遥控器 编程 编辑:程序博客网 时间:2024/05/19 02:31
1、当你往下浏览页面时,页面会自动去异步加载数据。
2、在页面下方有一个“点击加载”的按钮,点击之后页面会去加载数据。
虽说这样的操作用js并不难实现,但是现在有很多成熟的插件,很好很强大,让你可以很简单的就实现这样的功能。
这篇文章就是要介绍其中的一种jquery插件–Infinite Scroll, 用它来实现无限分页。
如果想要看实例,可以到以下网址查看:
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
2、所需的html
(1)有一个容器
当异步加载后,内容可以存在在这里
(2)在页面上需要有一个翻页的连接
(待会需要在js上指明),比如
3、所需的css
在加载的时候,页面会出现一个loading的层(id是#infscr-loading),这个部分的样式需要我们自己去定义,
下面是我自己网站的一个半透明黑色的样式,如果你喜欢,可以直接拿去用
4、js部分–自动加载
前面的部分都准备之后,js部分其实是很容易的,直接调用infinitescroll方法,指明一些参数就行。(参数列表详见一、6)
如果想要看示例,可以查看520xmn.com,里面的无限分页就是用了这个插件.
5、js部分–点击后再加载
infinite scroll默认是自动加载的,但是在某些情况下,我们希望的是用户点击“加载”按钮之后,才去异步加载数据,实现起来也不难。
就在需要实现点击后再加载的地方,加上类似的代码
6、参数说明
infinitescroll还有很多强大的参数支持
这是从 https://github.com/paulirish/infinite-scroll翻译过来的,如果觉得翻译的不对,可以自行查询原版。
比如每篇文章都有item这个classanimatefalse加载完毕是否采用动态效果pathParseunderfine切割nextSelector的url的规则, 提取出需要加载第几页
如:["/index?key1=${val1 }&key2=${val2}&page=",""]dataTypehtml加载回来的数据格式,支持”json|html”bufferPx40提示语展现的时长,数字越大,展现时间越短infid0示例的id,用于区分页面多次用到这个插件
7、其他
(1)操作
infiniter scroll还提供暂停和恢复操作,
如
(2)状态
提供了几个状态供我们去查询
isDuringAjax
isInvalidPage
isDestroyed //处在destroyed状态?
isDone //加载完毕?
isPaused //处在暂停状态?
currPage //当前页数
我们可以在自定义函数里面去查询
- Infinite Scroll–无限分页
- jquery插件(二):Infinite Scroll–无限分页
- 无限滚动插件infinite-scroll介绍
- ionic 下拉分页 ion-infinite-scroll标签
- 【无限滚动加载数据】—infinite-scroll插件的使用
- 【无限滚动加载数据】—infinite-scroll插件的使用
- 【无限滚动加载数据】—infinite-scroll插件的使用
- ng中infinite-scroll插件无限请求问题解决方法
- 小白入门---Vue无限滚动(vue-infinite-scroll)
- jQuery Infinite Ajax Scroll(ias) 分页插件介绍
- android scroll view infinite scroll
- Infinite Ajax Scroll (IAS)
- infinite-scroll插件使用
- 【无限滚动加载数据】—infinite-scroll插件的使用---------下拉加载数据、无线滚动
- infinite-scroll 滚动不停止
- vue muit-ui infinite-scroll源码解析
- ion-infinite-scroll实现上拉刷新
- 滚动条知识点之一: infinite scroll
- Securing Networks: Access Control List (ACL) Concepts
- Charles之协助iOS开发工具
- C#随记4
- java: String StringBuffer StringBuilder
- PHP的运行机制与原理(底层)
- Infinite Scroll–无限分页
- Hbase之遍历获取数据
- 界面设计的技巧
- Swift3.0学习笔记-Functions
- python小程序:查找nginx日志文件的ip点击率并排序
- BigDecimal类型比较大小
- mysql支付emoji表情设置
- Android开发:绘制按纽
- c++初学之引用