IScroll是移动页面上被使用的一款仿系统滚动插件。IScroll5相对于之前的IScroll4改进了许多,使得大家可以更方便的定制所需的功能了。
做项目的时候正好用到了这个插件,自己做了一下总结,发在这里方便大家学习IScroll5。
IScroll最简单的DOM结构:
<div id="wrapper">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
初始化iscroll
var myScroll = new IScroll('#wrapper',options);
初始化设置
初始化设置使用实例:
var myScroll = new IScroll('#wrapper', {
mouseWheel: true,
scrollbars: true
});
设置列表:
所属 |
属性名 |
说明 |
默认值 |
核心库 croe |
options.useTransform |
是否使用CSS3的Transform属性 |
true |
options.useTransition |
是否使用CSS3的Transition属性,否则使用requestAnimationFram代替 |
true |
|
options.HWCompositing |
是否启用硬件加速 |
true |
|
options.bounce |
是否启用弹力动画效果,关掉可以加速 |
true |
|
基础特性 Basic features |
options.click |
是否启用click事件。建议关闭此选项并启用自定义的tap事件(options.tap) |
false |
options.disableMouse |
是否关闭鼠标事件探测。如知道运行在哪个平台,可以开启它来加速。 |
false |
|
options.disablePointer |
是否关闭指针事件探测。如知道运行在哪个平台,可以开启它来加速。 |
false |
|
options.disableTouch |
是否关闭触摸事件探测。如知道运行在哪个平台,可以开启它来加速。 |
false |
|
options.eventPassthrough |
使用IScroll的横轴滚动时,如想使用系统立轴滚动并在横轴上生效,请开启。 |