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

转载于:https://www.cnblogs.com/ZHF/p/5941644.html