IScroll5中文API整理,用法与参考
IScroll是移动页面上被使用的一款仿系统滚动插件。IScroll5相对于之前的IScroll4改进了许多,使得大家可以更方便的定制所需的功能了。
做项目的时候正好用到了这个插件,自己做了一下总结,发在这里方便大家学习IScroll5。
官网:http://iscrolljs.com/
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使用 |
next() prev() |
上一页,下一页 结合options.snap使用 |
|
缩放 |
zoom(scale, x, y, time) |
缩放容器 Scale:缩放因子 |
刷新 |
refresh() |
刷新IScroll |
销毁 |
destroy() |
销毁IScroll,节省资源 |
IScroll的事件
事件使用实例:
myScroll = new IScroll('#wrapper'); myScroll.on('scrollEnd', doSomething);
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 |
转载于:https://www.cnblogs.com/jiangxiaobo/p/5753410.html
IScroll5中文API整理,用法与参考相关推荐
- Bootstrap FileInput(文件上传)中文API整理
下载地址.API和DOM地址(英语好的小伙伴可以看看) 下载地址:https://github.com/kartik-v/bootstrap-fileinput API文档 :http://plugi ...
- SDL2中文API(整理)
相关文件 SDL2/SDL.h 功能:初始化SDL 参数: flags 系统名称,取值如下 SDL_INIT_TIMER定时器子系统SDL_INIT_AUDIO音频子系统SDL_INIT_VIDEO视 ...
- Java High Level REST Client 中文API(仅供参考)
1.初始化 兼容性 Java High Level REST Client需要Java 1.8,并依赖于Elasticsearch核心项目,客户端版本与客户端开发的Elasticsearch版本相同, ...
- Bootstrap系列之-FileInput中文API整理
一. 引入文件 <link href="../css/bootstrap.min.css"rel="stylesheet"> <link ...
- Servlet中文API文档-个人整理版
Servlet中文API文档-个人整理版 一.Servlet 说明:servlet抽象集是javax.servlet.Servlet接口,它规定了必须由Servlet类实现由servlet引擎识别和管 ...
- COcos2d-X 中文API
本文来自http://blog.csdn.net/runaying ,引用必须注明出处! COcos2d-X 中文API 温馨提醒:使用二维码扫描软件,就可以在手机上访问我的博客啦!另外大家可以访问另 ...
- java中uploadify_java 上传3(uploadify中文api)
基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个 ...
- jstree中文api文档_开发中文 API 的一些策略
注:本文仅基于个人在其他英文编程语言中实现中文 API 的有限实践和见闻,对易语言等等中文编程语言的生态不甚了解,各种疏漏请指正. 如果要现在的我,选择一个英文 API 进行中文化,或者针对一种功能开 ...
- JavaScript一些常用 API整理汇总
JavaScript一些常用 API整理汇总 Array new Set() 数组去重 const arr = [3,4,4,5,4,6,5,7]; console.log(new Set(arr)) ...
最新文章
- P2870 [USACO07DEC]最佳牛线,黄金Best Cow Line, Gold(加强版)(贪心+hash哈希)
- Android studio | From Zero To One ——XML文件中的单行注释与多行注释
- SharePoint 2007 用户创建 MySite 过程发生错误一例【已解决】
- 反模式设计_设计模式:模式或反模式,这就是问题
- 《计算机科学概论(第12版)》—第0章0.3节学习大纲
- word文档保存发生错误_文档还是没有发生
- Quartz+log4net实现控制台程序定时运行,并且记录日志
- mysql模糊查询索引失效_MySql学习笔记(九):索引失效
- AI ProCon 2020第一天:40+大厂专家共话AI技术应用下一个十年!
- 看你能坚持读几本书?!——三十本互联网必看书籍
- coreldraw快速撤回_CorelDRAW操作技巧,教你CDR撤销操作方法与设置技巧
- Apple Developer苹果签名工具
- 关于树莓派(一):如何让树莓派和笔记本直连SSH
- needs to declare permission android.permission.REQUEST_INSTALL_PACKAGES
- 如何写好一个打动投资人的计划书
- 主机链接vm虚拟机中的oracle实例
- BMP图片加马赛克C语言C++超简单
- 【SVN异常】svn: E175003: The server at ‘https://svn.example.com/!/%23MyRepo/‘ does not support the HTTP/
- (原创)微信公众号开发的简单模板及配置流程简介
- (C语言)用函数实现求三个数最大值
热门文章
- python中max函数用法_Python中max函数用法实例分析
- 【论文阅读】Learning Traffic as Images: A Deep Convolutional ... [将交通作为图像学习: 用于大规模交通网络速度预测的深度卷积神经网络](1)
- 64位ubuntu 12.04下如何解决中文乱码的问题
- 【转载】315M无线模块数据传输——深入研究
- Java NIO原理和使用
- 全志A33-ARM linux开机进入uboot命令行
- ces测试数据测试ces测试数据测试ces测试数据测试ces测试数据测试ces测试数据测试ces测试数据测试ces测试数据测试再次测试
- 顺丰负债300亿就压力山大,而万达曾经负债4000亿却稳如泰山
- 上半年银行罚单不断,7月越早贷款越有利
- 心灵之光、思想之树:推荐《作家曰》