iscroll中文文档
转自:http://blog.csdn.net/sweetsuzyhyf/article/details/44195549
IScroll.js 最新版本 v5.1.2
修复了输入框无法输入和横向滚动时无法上下滚动页面的问题
var myScroll = new IScroll('#wrapper', {
disableMouse: true,
disablePointer: true
});
官网:http://iscrolljs.com
github: https://github.com/cubiq/iscroll/
调用时参数设置:
| 所属 | 属性名 | 说明 | 默认值 |
| 核心库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.scrollXoptions.scrollY | 可以设置IScroll滚动的初始位置 | 0 | |
| 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.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 每滚动一像素触发一次 |
||
| 分割页面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.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.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 } |
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,节省资源 |
事件使用:
| beforeScrollStart | 用户点击屏幕,但是还未初始化滚动前 |
| scrollCancel | 初始化滚动后又取消 |
| scrollStart | 开始滚动 |
| scroll | 滚动中 |
| scrollEnd | 滚动结束 |
| flick | 轻击屏幕左、右 |
| zoomStart | 开始缩放 |
| zoomEnd | 缩放结束 |
IScroll的属性:
iscroll中文文档的更多相关文章
- Phoenix综述(史上最全Phoenix中文文档)
个人主页:http://www.linbingdong.com 简书地址:http://www.jianshu.com/users/6cb45a00b49c/latest_articles 网上关于P ...
- Chart.js中文文档-雷达图
雷达图或蛛网图(Radar chart) 简介 A radar chart is a way of showing multiple data points and the variation bet ...
- Knockout中文开发指南(完整版API中文文档) 目录索引
a, .tree li > span { padding: 4pt; border-radius: 4px; } .tree li a { color:#46cfb0; text-decorat ...
- ReactNative官方中文文档0.21
整理了一份ReactNative0.21中文文档,提供给需要的reactnative爱好者.ReactNative0.21中文文档.chm 百度盘下载:ReactNative0.21中文文档 来源: ...
- java中文文档官方下载
一直在寻找它,今天无意之间终于发现它了! http://download.oracle.com/technetwork/java/javase/6/docs/zh/api/overview-summa ...
- Spring中文文档
前一段时间翻译了Jetty的一部分文档,感觉对阅读英文没有大的提高(*^-^*),毕竟Jetty的受众面还是比较小的,而且翻译过程中发现Jetty的文档写的不是很好,所以呢翻译的兴趣慢慢就不大了,只能 ...
- jQuery 3.1 API中文文档
jQuery 3.1 API中文文档 一.核心 1.1 核心函数 jQuery([selector,[context]]) 接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素. jQ ...
- jQuery EasyUI API 中文文档 - ComboGrid 组合表格
jQuery EasyUI API 中文文档 - ComboGrid 组合表格,需要的朋友可以参考下. 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults ...
- jQuery EasyUI API 中文文档 - ValidateBox验证框
jQuery EasyUI API 中文文档 - ValidateBox验证框,使用jQuery EasyUI的朋友可以参考下. 用 $.fn.validatebox.defaults 重写了 d ...
随机推荐
- Codeforces679E. Bear and Bad Powers of 42
传送门 今天子帧的一套模拟题的T3. 考试的时候其实已经想到了正解了,但是一些地方没有想清楚,就没敢写,只打了个暴力. 首先考虑用线段树维护区间信息. 先把每个值拆成两个信息,一是距离他最近的且大于他 ...
- 20145309java第三次实验报告
实验三 敏捷开发与XP实践 实验内容 •下载并学会使用git上传代码: •与同学结对,相互下载并更改对方代码,并上传: •实现代码的重载. 实验步骤 下载并用git上传代码: •1.下载并安装好git ...
- 20145324 《Java程序设计》第8周学习总结
20145324 <Java程序设计>第8周学习总结 教材学习内容总结 第十四章 1.NIO使用频道来衔接数据节点,可以设定缓冲区容量,在缓冲区中对感兴趣的数据区块进行标记,提供clear ...
- 20145329《Java程序设计》第四周学习总结
教材学习内容总结 封装.继承.多态 封装:封装类私有数据,让用户无法直接存取. 继承: 定义:避免多个类间重复定义共同行为,就是相同的代码提升为父类,java中只能继承一个父类.用继承的方式编写代码可 ...
- Excel水平线画不直,图形对象对不齐,怎么办
看够了千篇一律的数字报表,不妨添加些图形对象来调剂下,今天小编excel小课堂(ID:excel-xiaoketang 长按复制)给各位分享10个插入图形对象时简单实用的小技巧. 01课题 今天小编e ...
- Hive压缩格式
TextFile Hive数据表的默认格式,存储方式:行存储. 可使用Gzip,Bzip2等压缩算法压缩,压缩后的文件不支持split 但在反序列化过程中,必须逐个字符判断是不是分隔符和行结束符,因此 ...
- openwrt下如何只编译linux内核
答:make target/linux/install V=s (此操作也会将最终镜像打包好,V=s会输出日志) 拓展 清空内核: make target/linux/clean V=s 解压内核: ...
- 【cs231n】反向传播笔记
前言 首先声明,以下内容绝大部分转自知乎智能单元,他们将官方学习笔记进行了很专业的翻译,在此我会直接copy他们翻译的笔记,有些地方会用红字写自己的笔记,本文只是作为自己的学习笔记.本文内容官网链接: ...
- Jenkins-Kubernetes-docker-自动发布
使用的是Jenkins pipeline: 这里只是做了更新,没有创建,没有借助helm等工具,先用着,以后再研究. pipeline { agent any stages { stage(" ...
- php isset
isset函数是检测变量是否设置. 格式:bool isset ( mixed var [, mixed var [, ...]] ) 返回值: 若变量不存在则返回 FALSE 若变量存在且其值为NU ...