IScroll5 中文API参数说明和调用方法
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的横轴滚动时，如想使用系统立轴滚动并在横轴上生效，请开启。 |
false |
|
|
options.freeScroll |
主要在上下左右滚动都生效时使用，可以向任意方向滚动。 |
false |
|
|
options.keyBindings |
绑定按键事件。 |
false |
|
|
options.invertWheelDirection |
反向鼠标滚轮。 |
false |
|
|
options.momentum |
是否开启动量动画，关闭可以提升效率。 |
true |
|
|
options.mouseWheel |
是否监听鼠标滚轮事件。 |
false |
|
|
options.preventDefault |
是否屏蔽默认事件。 |
true |
|
|
options.scrollbars |
是否显示默认滚动条 |
false |
|
|
options.scrollX options.scrollY |
可以设置是否显示横向或纵向滚动条 |
scrollX false scrollY true |
|
|
options.tap |
是否启用自定义的tap事件 可以自定义tap事件名 |
false |
|
|
滚动条 Scrollbars |
options.scrollbars |
是否显示默认滚动条 |
false |
|
options.fadeScrollbars |
是否渐隐滚动条，关掉可以加速 |
true |
|
|
options.interactiveScrollbars |
用户是否可以拖动滚动条 |
false |
|
|
options.resizeScrollbars |
是否固定滚动条大小，建议自定义滚动条时可开启。 |
false |
|
|
options.shrinkScrollbars |
滚动超出滚动边界时，是否收缩滚动条。 ‘clip'：裁剪超出的滚动条 ‘scale':按比例的收缩滚动条（占用CPU资源） false:不收缩， |
false |
|
|
options.indicators |
指示IScroll该如何滚动，Scrollbars的底层实现方式。 |
||
|
options.indicators.el |
制定滚动条的容器。容器中的第一个元素即为指示器。 例如： indicators: { el: document.getElementById('indicator') } indicators: { el: '#indicator' } |
||
|
options.indicators.ignoreBoundaries |
是否忽略容器边界。设为true 可以设置滚动速度 |
false |
|
|
options.indicators.listenX options.indicators.listenY |
指示器监听那个方向的滚动，可以设置为一个方向或2个方向 |
true |
|
|
options.indicators.speedRatioX options.indicators.speedRatioY |
指示器相对主滚动条的速度 |
0 |
|
|
options.indicators.fade options.indicators.interactive options.indicators.resize options.indicators.shrink |
如scrollbars的设置 |
||
|
options.probeType |
需要使用iscroll-probe.js才能生效 probeType：1 滚动不繁忙的时候触发 probeType：2 滚动时每隔一定时间触发 probeType：3 每滚动一像素触发一次 |
||
|
分割页面snap |
options.snap |
自动分割容器，用于制作走马灯效果等。 Options.snap:true//根据容器尺寸自动分割 Options.snap:el//根据元素分割 |
false |
|
缩放 zoom |
options.zoom |
是否打开缩放 最好使用iscroll-zoom.js 如放大模糊，可将源容器定义为2倍大小，然后scale(0.5) |
false |
|
options.zoomMax |
最大缩放等级 |
4 |
|
|
options.zoomMin |
最小缩放等级 |
1 |
|
|
options.startZoom |
初始缩放等级 |
1 |
|
|
options.wheelAction |
滚轮动作 设为'zoom'，可以用滚轮缩放 |
undefined |
|
|
更多设置 |
options.bindToWrapper |
光标、触摸超出容器时，是否停止滚动 |
false |
|
options.bounceEasing |
弹力动画效果 预置效果：'quadratic', 'circular', 'back', 'bounce', 'elastic'（最后两个不能通过css3表现） 还可以自定义效果 bounceEasing: { style: 'cubic-bezier(0,0,1,1)',//css3时 fn: function (k) { return k; }//不使用css3，使用requestAnimationFrame时 } |
'circular' |
|
|
options.bounceTime |
弹力动画持续的毫秒数 |
600 |
|
|
options.deceleration |
滚动动量减速 越大越快，建议不大于0.01 |
0.0006 |
|
|
options.mouseWheelSpeed |
鼠标滚轮速度 |
||
|
options.preventDefaultException |
列出哪些元素不屏蔽默认事件； |
{tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } |
|
|
options.resizePolling |
重新调整窗口大小时，重新计算IScroll的时间间隔 |
60 |
|
|
键位绑定 |
options.keyBindings |
监听按键事件控制IScroll 例如： keyBindings: { pageUp: 33, pageDown: 34, end: 35, home: 36, left: 37, up: 38, right: 39, down: 40 } |
|
IScroll5的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可以同时生效。 结合options.snap使用 |
|
next() prev() |
上一页，下一页 结合options.snap使用 |
|
|
缩放 |
zoom(scale, x, y, time) |
缩放容器 Scale:缩放因子 |
|
刷新 |
refresh() |
刷新IScroll |
|
销毁 |
destroy() |
销毁IScroll，节省资源 |
IScroll的事件：
|
beforeScrollStart |
用户点击屏幕，但是还未初始化滚动前 |
|---|---|
|
scrollCancel |
初始化滚动后又取消 |
|
scrollStart |
开始滚动 |
|
scroll |
滚动中 |
|
scrollEnd |
滚动结束 |
|
flick |
轻击屏幕左、右 |
|
zoomStart |
开始缩放 |
|
zoomEnd |
缩放结束 |
事件使用实例：
myScroll = new IScroll('#wrapper');
myScroll.on('scrollEnd', doSomething);
IScroll的属性：
|
myScroll.x/y |
当前位置 |
|---|---|
|
myScroll.directionX/Y |
上一次的滚动方向(-1 下/右, 0 保持原状, 1 上/左) |
|
myScroll.currentPage |
当前Snap信息 |
|
myScroll.maxScrollXmyScroll.maxScrollY |
当滚动到底部时的 myScroll.x/y |
相关推荐
-
基于HTML5上使用iScroll实现下拉刷新，上拉加载更多
前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据而已,上拉是追加数据. 使用技巧 1.引用iScroll.js, 在初始化时添加两个事件监听:touchMove.DOMContentLoaded. 2.实现iScroll插件的onScrollEnd事件, 也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加. 3.上拉加载更多请求后台时
-
学习使用jquery iScroll.js移动端滚动条插件
大家在日常工作中最常用的插件是什么,jQurey?Lazyload?但是这些都是在PC端,但是在移动端最常用的插件莫过于iScroll了,iScroll到底是什么东西,应该怎么用?iScroll是个很强大的插件,我也只是略懂皮毛,这里我们简单的介绍一下. iScroll的产生: iScroll的产生完全是因为移动版webkit浏览器,例如在iPhone,Android 的移动设备上. iScroll的使用方法: iScroll的原理是外层有一个溢出隐藏(overflow:hidden;)的DOM
-
iScroll中事件点击触发两次解决方案
之前也看了很多朋友的文章里有讲这个问题.比如使用一个变量记录执行的间隔时间什么的.感觉每次都要去撸一下,比较累人.本人喜欢搬砖前先选工具.其实解决这个方法很简单.iScroll呢其实是截获了点击浏览器时的touchstart和touchend事件.在touchend的时候使用js去触发元素的onclick事件(_end这个函数).而在实际操作中,先执行了touchend,然后再执行了一次onclick的相关函数.这样就形成了头疼的一次点击两次触发.这本来就一个不是问题的问题.之所以说这是个问题,
-
JQuery插件iScroll实现下拉刷新，滚动翻页特效
JQuery插件:iScroll 页面布局: <div id="wrapper"> <div id="scroller"> <div id="pullDown"> <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span> <
-
利用iscroll4实现轮播图效果实例代码
前言 iscroll之所以会诞生,主要是因为无论是在以前的iphone.ipod.android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容.相信很多人和我一样,在使用iscroll的是时候只知道可以手动滑动,不知道iscroll的轮播怎么实现,那么以下就是我做的一个轮播效果,亲测有效: 一.html代码,当然可以动态添加下面的小圆点 <div id="wrapper"> <div id="scroller&qu
-
基于iscroll.js实现下拉刷新和上拉加载效果
现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于H5来实现. 先看下运行效果: 是不是有点小小的'鸡冻' ,它就是由我们今天要介绍的主人公'iscroll.js'实现的,接下来我以最最简便的方式教给大家~~ 实现步骤 一.准备好iscroll.js库 到官网下载即可: https://github.com/cubiq/iscroll 二.搭建页面结构 &l
-
iScroll.js 使用方法参考
概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码.这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android 这些系统上广泛使用) 提供了一种本地化的方式来对一个限定了高度和宽度的元素的内容进行滑动.很不幸的是,这种情况下所有的web应用的页面就不能够包含具有position:absolute的头.页尾或者是一个内容可滚动的 中间区域. 然而,Android系统最新修订版已经可以支持这种功能了(尽管支持的力度还不是特别好),Apple
-
iscroll碰到Select无法选择下拉刷新的解决办法
第一步: 在handleTarget函数方法开始加入: 复制代码 代码如下: var theTarget = e.target; if (theTarget != null && theTarget.tagName == 'SELECT') { return false; } 第二步: 在 touchStart函数处即_start()处必须加入: 复制代码 代码如下: if (e.target.tagName != "SELECT") { e.prev
-
iscroll.js的上拉下拉刷新时无法回弹的解决方法
使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题:在iOS的浏览器中,上拉或下拉刷新时,当手指划出屏幕后,页面无法弹回.很多人因为解决不了这个问题,干脆就那样不解决了,还有的直接就不用HTML了,使用原生代替HTML页面. 相信很多朋友也有自己的解决办法,只是没写出来,所以网上都搜不到解决方案.在很多QQ群里面也有很多人在问该怎么解决这个问题,所以我写这篇文章记录一下我的解决方案,希望对一些朋友有所帮助. 上拉下拉刷新的主要代码: myScroll = new iScrol
-
jQuery iScroll.js 移动端滚动条美化插件第1/5页
官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ 'Carousel' demo iScroll功能很强大,目前我只用来 自定义滚动条 以下简单介绍一下iscrol在移动端自定义滚动条时的使用和注意事项. 一.用法 iScroll对要滚动的元素进行初始化,且不限制一个页面中使用iScroll的元素个数. 使用iScroll时,DOM树的结构要足够