您的位置：首页 > 其它

IScroll5 参数说明和调用方法

2016-03-13 14:17 148 查看
目录(?)[-]

API
事件使用
IScroll的属性

IScroll.js 最新版本 v5.1.2

修复了输入框无法输入和横向滚动时无法上下滚动页面的问题
var myScroll = new IScroll('#wrapper', {
disableMouse: true,
disablePointer: true
});


官网：http://iscrolljs.com

github： https://github.com/cubiq/iscroll/


调用时参数设置：
所属属性名说明默认值
核心库croeoptions.useTransform是否使用CSS3的Transform属性true
options.useTransition是否使用CSS3的Transition属性，否则使用requestAnimationFram代替true
options.HWCompositing是否启用硬件加速true
options.bounce是否启用弹力动画效果，关掉可以加速true
基础特性Basic featuresoptions.click是否启用click事件。建议关闭此选项并启用自定义的tap事件（options.tap）false
options.disableMouse是否关闭鼠标事件探测。如知道运行在哪个平台，可以开启它来加速。false
options.disablePointer是否关闭指针事件探测。如知道运行在哪个平台，可以开启它来加速。false
options.disableTouch是否关闭触摸事件探测。如知道运行在哪个平台，可以开启它来加速。false
options.eventPassthrough使用IScroll的横轴滚动时，如想使用系统立轴滚动并在横轴上生效，请开启。event passthrough demofalse
options.freeScroll主要在上下左右滚动都生效时使用，可以向任意方向滚动。2D scroll demofalse
options.keyBindings绑定按键事件。Key bindingsfalse
options.invertWheelDirection反向鼠标滚轮。false
options.momentum是否开启动量动画，关闭可以提升效率。true
options.mouseWheel是否监听鼠标滚轮事件。false
options.preventDefault是否屏蔽默认事件。true
options.scrollbars是否显示默认滚动条false
options.scrollXoptions.scrollY可以设置IScroll滚动的初始位置0
options.tap是否启用自定义的tap事件可以自定义tap事件名false
滚动条Scrollbarsoptions.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 可以设置滚动速度parallax demofalse
options.indicators.listenXoptions.indicators.listenY指示器监听那个方向的滚动，可以设置为一个方向或2个方向true
options.indicators.speedRatioXoptions.indicators.speedRatioY指示器相对主滚动条的速度0
options.indicators.fadeoptions.indicators.interactive

options.indicators.resize

options.indicators.shrink
如scrollbars的设置minimap demo
options.probeType需要使用iscroll-probe.js才能生效probeType：1 滚动不繁忙的时候触发

probeType：2 滚动时每隔一定时间触发

probeType：3 每滚动一像素触发一次
分割页面snapoptions.snap自动分割容器，用于制作走马灯效果等。Options.snap:true//根据容器尺寸自动分割

Options.snap:el//根据元素分割
false
缩放zoomoptions.zoom是否打开缩放最好使用iscroll-zoom.js

如放大模糊，可将源容器定义为2倍大小，然后scale(0.5)

zoom demo
false
options.zoomMax最大缩放等级4
options.zoomMin最小缩放等级1
options.zoomStart初始缩放等级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.010.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

}


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即为屏幕中心

scroll to element
分割页面snapgoToPage(x, y, time, easing)根据options.snap分割页面，跳转到横向、纵向某页。XY可以同时生效。结合options.snap使用
next()prev()上一页，下一页结合options.snap使用
缩放zoom(scale, x, y, time)缩放容器Scale:缩放因子
刷新refresh()刷新IScroll
销毁destroy()销毁IScroll，节省资源


事件使用：

beforeScrollStart用户点击屏幕，但是还未初始化滚动前
scrollCancel初始化滚动后又取消
scrollStart开始滚动
scroll滚动中
scrollEnd滚动结束
flick轻击屏幕左、右
zoomStart开始缩放
zoomEnd缩放结束


IScroll的属性：

myScroll.x/y当前位置
myScroll.directionX/Y上一次的滚动方向(-1 下/右, 0 保持原状, 1 上/左)
myScroll.currentPage当前Snap信息
myScroll.maxScrollXmyScroll.maxScrollY当滚动到底部时的 myScroll.x/y

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航