IScroll5 中文API参数说明和调用方法

更新时间：2016年05月21日 11:09:26 作者：无赖君子

IScroll是移动页面上被使用的一款仿系统滚动插件。IScroll5相对于之前的IScroll4改进了许多，使得大家可以更方便的定制所需的功能了。

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的横轴滚动时，如想使用系统立轴滚动并在横轴上生效，请开启。 event passthrough demo	false
	options.freeScroll	主要在上下左右滚动都生效时使用，可以向任意方向滚动。 2D scroll demo	false
	options.keyBindings	绑定按键事件。 Key bindings	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 可以设置滚动速度 parallax demo	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的设置 minimap demo
	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) zoom demo	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即为屏幕中心 scroll to element
分割页面snap	goToPage(x, y, time, easing)	根据options.snap分割页面，跳转到横向、纵向某页。XY可以同时生效。结合options.snap使用
分割页面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

myScroll.x/y

当前位置

myScroll.directionX/Y

上一次的滚动方向(-1 下/右, 0 保持原状, 1 上/左)

myScroll.currentPage

当前Snap信息

myScroll.maxScrollXmyScroll.maxScrollY

当滚动到底部时的 myScroll.x/y

您可能感兴趣的文章:

IScroll5
API

for of 和 for in 的区别介绍
这篇文章主要介绍了for of 和 for in 的区别,for of 和 for in都是用来遍历的属性，本文重点介绍下for of 和 for in 的区别，需要的朋友可以参考下
2022-12-12
js实现点击切换TAB标签实例
这篇文章主要介绍了js实现点击切换TAB标签的方法,涉及javascript鼠标点击事件及页面元素的遍历技巧,需要的朋友可以参考下
2015-08-08
JavaScript实现简易加法计算器
这篇文章主要介绍了JavaScript实现简易加法计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03
常用限制input的方法的js代码
常用限制input的方法的js代码...
2007-03-03
浅谈Layui的eleTree树式选择器使用方法
今天小编就为大家分享一篇浅谈Layui的eleTree树式选择器使用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
jqGrid读取选择的多行的某个属性代码
这篇文章主要介绍了jqGrid读取选择的多行的某个属性实现代码,需要的朋友可以参考下
2014-05-05
微信小程序项目总结之点赞删除列表分享功能
这篇文章主要介绍了微信小程序项目总结之点赞删除列表分享功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-06-06
自己实现string的substring方法人民币小写转大写，数字反转，正则优化
这是最近碰到的几个题目，简单地写一下我自己的方案，在此分享给大家，也希望能看到大家的方案
2012-09-09
JavaScript模块化开发之SeaJS
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制,本文给大家介绍JavaScript模块化开发之SeaJS，需要的朋友参考下
2015-12-12
微信小程序阻止页面返回实例详解(包滑动、自动返回键)
小程序如果在页面内进行复杂的界面设计,用户进行返回操作会直接离开当前页面,不符合用户预期,下面这篇文章主要给大家介绍了关于微信小程序阻止页面返回(包滑动、自动返回键)的相关资料,需要的朋友可以参考下
2023-06-06

IScroll5 中文API参数说明和调用方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具