资源预览内容
第1页 / 共5页
第2页 / 共5页
第3页 / 共5页
第4页 / 共5页
第5页 / 共5页
亲,该文档总共5页全部预览完了,如果喜欢就下载吧!
资源描述
设置列表:所属 属性名 说明 默认值核心库 croeoptions.useTransform 是否使用 CSS3 的 Transform 属性 trueoptions.useTransition 是否使用 CSS3 的 Transition 属性, 否则使用requestAnimationFram 代替 trueoptions.HWCompositing 是否启用硬件加速 trueoptions.bounce 是否启用弹力动画效果, 关掉可以加速 true基础特性Basic featuresoptions.click 是否启用 click 事件。 建议关闭此选项并启用自定义的 tap事件( options.tap) falseoptions.disableMouse 是否关闭鼠标事件探测。 如知道运行在哪个平台, 可以开启它来加速。 falseoptions.disablePointer 是否关闭指针事件探测。 如知道运行在哪个平台, 可以开启它来加速。 falseoptions.disableTouch 是否关闭触摸事件探测。 如知道运行在哪个平台, 可以开启它来加速。 falseoptions.eventPassthrough使用 IScroll 的横轴滚动时, 如想使用系统立轴滚动并在横轴上生效, 请开启。event passthrough demofalseoptions.freeScroll主要在上下左右滚动都生效时使用, 可以向任意方向滚动。2D scroll demofalseoptions.keyBindings 绑定按键事件。Key bindings falseoptions.invertWheelDirection 反向鼠标滚轮。 falseoptions.momentum 是否开启动量动画, 关闭可以提升效率。 trueoptions.mouseWheel 是否监听鼠标滚轮事件。 falseoptions.preventDefault 是否屏蔽默认事件。 trueoptions.scrollbars 是否显示默认滚动条 falseoptions.scrollX options.scrollY 可以设置 IScroll 滚动的初始位置 0options.tap 是否启用自定义的 tap 事件 可以自定义 tap 事件名 falseoptions.scrollbars 是否显示默认滚动条 falseoptions.fadeScrollbars 是否渐隐滚动条, 关掉可以加速 true滚动条Scrollbarsoptions.interactiveScrollbars 用户是否可以拖动滚动条 falseoptions.resizeScrollbars 是否固定滚动条大小, 建议自定义滚动条时可开启。 falseoptions.shrinkScrollbars滚动超出滚动边界时, 是否收缩滚动条。clip : 裁剪超出的滚动条scale :按比例的收缩滚动条( 占用 CPU 资源)false:不收缩falseoptions.indicators 指示 IScroll 该如何滚动, Scrollbars 的底层实现方式。options.indicators.el制定滚动条的容器。 容器中的第一个元素即为指示器。例如:indicators: el: document.getElementById(indicator)indicators: el: #indicatoroptions.indicators.ignoreBoundaries 是否忽略容器边界。 设为 true 可以设置滚动速度parallax demo falseoptions.indicators.listenXoptions.indicators.listenY指示器监听那个方向的滚动, 可以设置为一个方向或 2 个方向 trueoptions.indicators.speedRatioXoptions.indicators.speedRatioY 指示器相对主滚动条的速度 0options.indicators.fadeoptions.indicators.interactiveoptions.indicators.resizeoptions.indicators.shrink如 scrollbars 的设置minimap demooptions.probeType需要使用 iscroll-probe.js 才能生效probeType: 1 滚动不繁忙的时候触发probeType: 2 滚动时每隔一定时间触发probeType: 3 每滚动一像素触发一次分割页面 snap options.snap自动分割容器, 用于制作走马灯效果等。Options.snap:true/根据容器尺寸自动分割Options.snap:el/根据元素分割false缩放 zoomoptions.zoom是否打开缩放最好使用 iscroll-zoom.js如放大模糊, 可将源容器定义为 2 倍大小, 然后 scale(0.5)zoom demofalseoptions.zoomMax 最大缩放等级 4options.zoomMin 最小缩放等级 1options.zoomStart 初始缩放等级 1options.wheelAction 滚轮动作设为 zoom , 可以用滚轮缩放undefined更多设置options.bindToWrapper 光标、 触摸超出容器时, 是否停止滚动 falseoptions.bounceEasing弹力动画效果预置效果: quadratic, circular, back, bounce, elastic( 最后两个不能通过 css3 表现)还可以自定义效果bounceEasing: style: cubic-bezier(0,0,1,1),/css3 时fn: function (k) return k; /不使用 css3, 使用requestAnimationFrame 时 circularoptions.bounceTime 弹力动画持续的毫秒数 600options.deceleration 滚动动量减速越大越快, 建议不大于 0.01 0.0006options.mouseWheelSpeed 鼠标滚轮速度options.preventDefaultException 列出哪些元素不屏蔽默认事件;options.resizePolling 重新调整窗口大小时, 重新计算 IScroll 的时间间隔 60键位绑定 options.keyBindings监听按键事件控制 IScroll例如:keyBindings: pageUp: 33,pageDown: 34,end: 35,home: 36,left: 37,up: 38,right: 39,down: 40IScroll5 的 API:所属 方法名 说明滚动 scrollTo(x, y, time, easing)滚动到: x, y, 事件, easing 方式x:inty:inttime:intEasing: 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, 节省资源IScroll 的事件事件使用实例:1. myScroll = new IScroll(#wrapper);2. myScroll.on(scrollEnd, doSomething);beforeScrollStart 用户点击屏幕, 但是还未初始化滚动前scrollCancel 初始化滚动后又取消scrollStart 开始滚动scroll 滚动中scrollEnd 滚动结束flick 轻击屏幕左、 右zoomStart 开始缩放zoomEnd 缩放结束IScroll 的属性myScroll.x/y 当前位置
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号