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结构以下:

1 <div id="wrapper">
2     <ul>
3         <li>...</li>
4         <li>...</li>
5         ...
6     </ul>
7 </div>

JS初始化:

1 <script type="text/javascript">
2 var myScroll = new IScroll('#wrapper');
3 </script>

 iScroll配置参数说明：

1 var myScroll = new IScroll('#wrapper', {
2     mouseWheel: true, //是否监听鼠标滚轮事件
3     scrollbars: true,      //是否显示默认滚动条
4     preventDefault: true,//是否屏蔽默认事件
5     preventDefaultException:{tagName:/^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }, //列出哪些元素不屏蔽默认事件
6     probeType: 3,//须要使用 iscroll-probe.js 才能生效 probeType ： 1   滚动不繁忙的时候触发;probeType ： 2   滚动时每隔必定时间触;probeType ： 3   每滚动一像素触发一次
7     
8 });

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