iscroll简单使用说明
iScroll是一个高性能,资源占用少,无依赖,跨平台的javascript上拉加载,下拉刷新的滚动插件,目前版本v5.2.0。
GitHub下载地址:https://github.com/cubiq/iscroll
iScroll进行了不同的优化,为了达到更高的性能,iScroll分为了多个版本,你可以根据项目选择最适合的版本。
目前有以下版本:
- iscroll.js,这个版本是常规应用的脚本。它包含大多数常用的功能,有很高的性能和很小的体积。
- iscroll-lite.js,精简版本。它不支持快速跳跃,滚动条,鼠标滚轮,快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又快的解决方案(这个能应付大多数场景)。
- iscroll-probe.js,探查当前滚动位置是一个要求很高的任务,这就是为什么我决定建立一个专门的版本。如果你需要知道滚动位置在任何给定的时间,这是iScroll给你的。(我正在做更多的测试,这可能最终在常规iscroll.js脚本,请留意)。
- iscroll-zoom.js,在标准滚动功能上增加缩放功能。
- iscroll-infinite.js,可以做无限缓存的滚动。处理很长的列表的元素为移动设备并非易事。 iScroll infinite版本使用缓存机制,允许你滚动一个潜在的无限数量的元素。
使用方法:
页面引用:
<script type="text/javascript" src="iscroll.js"></script>
HTML结构如下:
<div id="wrapper">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
JS初始化:
<script type="text/javascript">
var myScroll = new IScroll('#wrapper');
</script>
iScroll配置参数说明:
var myScroll = new IScroll('#wrapper', {
mouseWheel: true, //是否监听鼠标滚轮事件
scrollbars: true, //是否显示默认滚动条
preventDefault: true,//是否屏蔽默认事件
preventDefaultException:{tagName:/^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }, //列出哪些元素不屏蔽默认事件
probeType: 3,//需要使用 iscroll-probe.js 才能生效 probeType : 1 滚动不繁忙的时候触发;probeType : 2 滚动时每隔一定时间触;probeType : 3 每滚动一像素触发一次 });
API:
所属 | 方法名 | 说明 |
滚动 | scrollTo(x, y, time, easing) | 滚动到: x , y ,事件, easing
方式 x:int y:int time:int Easing: quadratic | circular | back | bounce | elastic 见 IScroll.utils.ease 对象 例: myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic); |
scrollBy(x, y, time, easing) | 滚动到相对于当前位置的某处其余同上 | |
scrollToElement(el, time, offsetX, offsetY, easing) | 滚动到某个元素。 el 为必须的参数offsetX/offsetY :相对于 el 元素的位移。设为 true 即为屏幕中心 | |
分割页面 snap | goToPage(x, y, time, easing) | 根据 options.snap 分割页面,跳转到横向、纵向某页。 XY 可以同时生效。 |
next() prev() | 上一页,下一页结合 options.snap使用 | |
缩放 | zoom(scale, x, y, time) | 缩放容器Scale: 缩放因子 |
刷新 | refresh() | 刷新 IScroll |
销毁 | destroy() | 销毁 IScroll ,节省资源 |
事件使用:
beforeScrollStart | 用户点击屏幕,但是还未初始化滚动前 |
scrollCancel | 初始化滚动后又取消 |
scrollStart | 开始滚动 |
scroll | 滚动中 |
scrollEnd | 滚动结束 |
flick | 轻击屏幕左、右 |
zoomStart | 开始缩放 |
zoomEnd | 缩放结束 |
这个在微信中使用还是存在一些小问题,欢迎大家拍砖,共同交流探讨。
喜欢H5,web开发的朋友可以加群:374166122
请使用手机"扫一扫"x
iscroll简单使用说明的更多相关文章
- Oracle 中 union 和union all 的简单使用说明
1.刚刚工作不久,经常接触oracle,但是对oracle很多东西都不是很熟.今天我们来了解一下union和union all的简单使用说明.Union(union all): 指令的目的是将两个 S ...
- struts 标签<s:ierator>的简单使用说明
struts 标签<s:ierator>的简单使用说明,只显示<s:ierator> 的前6条数据 <s:iterator value="lstVisitor& ...
- Spring依赖注入 --- 简单使用说明
Spring依赖注入 --- 简单使用说明 本文将对spring依赖注入的使用做简单的说明,enjoy your time! 1.使用Spring提供的依赖注入 对spring依赖注入的实现方法感兴趣 ...
- Linux下源码安装ffmpeg及ffmpeg的简单使用说明
一.编译安装 ffmpeg在安装时依赖的包和版本都很让人头疼,不同编译环境也各不相同.公司之前封装了一个又各种出错. 其实办法很简单,就是到官网一步一步按着做就行了:http://trac.ffmpe ...
- Android自定义属性简单使用说明
原创文章,转载请注明出处:http://www.cnblogs.com/baipengzhan/p/Android_attrs.html 本文从实用角度说明Android自定义属性的基本使用流程,清晰 ...
- SDL结合QWidget的简单使用说明(2)
上篇主要讲了针对yv12流数据的渲染,但有时候我们显示视频还要求加一些信息,比如头像,昵称等等.一般的想法是在渲染窗口之上做一个小控件来负责: 但是很遗憾,你会发现你的控件被SDL的渲染完全遮住了,渲 ...
- SDL结合QWidget的简单使用说明
SDL(Simple DirectMeida Layer)是一个简单的封装媒体库,功能主要涉及了相关于OpenGL或者DirectX的显卡硬件功能和一些鼠标,键盘等外设访问.这里主要只说明一下它的渲染 ...
- ViewPager的简单使用说明
前提:工程中使用ViewPager,需要导入google提供的jar包(android-support-v4.jar). 要学习ViewPager的使用,建议直接看官方文档 Creating Swip ...
- jmeter作接口测试入门的简单使用说明
一.添加接口信息 1.添加线程组 (1)路径如下图: (2)部分内容解释 a. Number of Threads(users):线程数 b. Ramp-Up Period(in seconds) ...
随机推荐
- Maven + 最新SSM整合
. 1. 开发环境搭建 参考博文:Eclipse4.6(Neon) + Tomcat8 + MAVEN3.3.9 + SVN项目完整环境搭建 2. Maven Web项目创建 2.1. 2.2. 2. ...
- 对angular实现延迟加载template和controller
1.在lib目录中添加 script.js 文件,并在index.html其他<script>之前引用之: <script src="lib/script.js" ...
- Week1 Java 基础知识
JDK=JRE+Tools JRE=JVM+API 封装:1.模块化:将属性和行为封装在类中,程序定义很多类:2.信息隐蔽:将类的细节部分隐藏起来,用户只通过受保护的接口访问某个类. 继承:父类和 ...
- redis和ssdb读取性能对比
最近关注了一下ssdb,它的特点是基于文件存储系统所以它支撑量大的数据而不因为内存的限制受取约束.从官网的测试报告来看其性能也非常出色和redis相当,因此可以使用它来代替redis来进行k-v数据业 ...
- WPF Dispatcher 一次小重构
几个月之前因为项目需要,需要实现一个类似于WPF Dispatcher类的类,来实现一些线程的调度.之前因为一直做Asp.Net,根本没有钻到这个层次去,做的过程中,诸多不顺,重构了四五次,终于实现, ...
- 如果下次做模板,我就使用Nvelocity
普通Replace模板做法 很多人在做邮件模板.短信模板的时候,都是使用特殊标识的字符串进行占位,然后在后台代码中进行Replace字符串,如果遇到表格形式的内容,则需要在后台进行遍历数据集合,进行字 ...
- [安卓] 6、列表之ArrayAdapter适配
这个和以前的几个都有点不同,首先这个不用在xml中写对应的控件,而是直接在activity中将整个list实现的:首先要实例化列表和用于存储数据的数组list[9-10],第12-14行放list里加 ...
- Multiple MySQL running but PID file could not be found
[root@tao Desktop]# service mysql start Starting MySQL SUCCESS! [root@tao Desktop]# service mysql st ...
- Linux基础精华
Linux基础精华 (继续跟新中...) 常用命令: Linux shell 环境 让你提升命令行效 率的 Bash 快捷键 [完整版] 设置你自己的liux alias Linux的Find使用 L ...
- Web开发者的六个代码调试平台
代码调试平台是Web开发者进行开发.测试.分享.协作和交流的网络应用,它们支持实时的编辑.预览HTML.CSS和JavaScript的客户端代码.这些代码调试平台最值得称道的地方在于,它们中的大多数都 ...