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)

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

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,节省资源
     

事件使用:

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

IScroll的属性:

时间: 2024-11-02 15:10:01

iscroll中文文档的相关文章

Apache Storm 1.1.0 中文文档 | ApacheCN

前言  Apache Storm 是一个免费的,开源的,分布式的实时计算系统. 官方文档: http://storm.apache.org 中文文档: http://storm.apachecn.org ApacheCN 最近组织了翻译 Storm 1.1.0 中文文档 的活动,整体 翻译进度 为 96%. 感谢大家参与到该活动中来 感谢无私奉献的 贡献者,才有了这份 Storm 1.1.0 中文文档 感谢一路有你的陪伴,我们才可以做的更好,走的更快,走的更远,我们一直在努力 ... 网页地址:

Bottle 中文文档

译者: smallfish ([email protected]) 更新日期: 2009-09-25 原文地址: http://bottle.paws.de/page/docs (已失效) 译文地址: http://pynotes.appspot.com/static/bottle/docs.htm (需翻墙) 这份文档会不断更新. 如果在文档里没有找到答案,请在版本跟踪中提出 issue. 基本映射 映射使用在根据不同 URLs 请求来产生相对应的返回内容. Bottle 使用 route()

Hadoop-2.2.0中文文档—— Common - CLI MiniCluster

目的 使用 CLI MiniCluster, 用户可以简单地只用一个命令就启动或关闭一个单一节点的Hadoop集群,不需要设置任何环境变量或管理配置文件. CLI MiniCluster 同时启动一个 YARN/MapReduce 和 HDFS 集群. 这对那些想要快速体验一个真实的Hadoop集群或是测试依赖明显的Hadoop函数的非Java程序 的用户很有用. Hadoop Tarball 你需要从发布页获取tar包.或者,你可以从源码中自己编译. $ mvn clean install -

jQuery EasyUI API 中文文档

http://www.cnblogs.com/Philoo/tag/jQuery/ 共2页: 1 2 下一页 jQuery EasyUI API 中文文档 - 树表格(TreeGrid) 风流涕淌 2011-11-19 18:51 阅读:25025 评论:3 jQuery EasyUI API 中文文档 - 树(Tree) 风流涕淌 2011-11-18 20:13 阅读:31937 评论:2 jQuery EasyUI 1.2.4 API 中文文档(完整)目录 风流涕淌 2011-11-17

Hadoop-2.2.0中文文档——MapReduce 下一代 -——集群配置

目的 这份文档描写叙述了怎样安装.配置和管理从几个节点到有数千个节点的Hadoop集群. 玩的话,你可能想先在单机上安装.(看单节点配置). 准备 从Apache镜像上下载一个Hadoop的稳定版本号. 安装 安装一个Hadoop集群,一般包含分发软件到全部集群中的机器上或者是安装RPMs. 一般地,集群中的一台机器被唯一地设计成NameNode,还有一台机器被设置成ResourceManager.这是master(主). 集群中剩下的机器作为DataNode 和 NodeManager.这些是

swift中文文档- 类型转换

未翻译完 待续(英语烂,求斧正) Type Casting 类型转换 Type casting is a way to check the type of an instance, and/or to treat that instance as if it is a different superclass or subclass from somewhere else in its own class hierarchy. 类型转换是检测实例所属类型的一种方法,和/或 去对待实例好像它是一个

Mod_Python中文文档

Mod_Python中文文档 mod_python中文文档Mod_Python中文文档,布布扣,bubuko.com

Hadoop-2.2.0中文文档—— Web应用代理

Web应用代理是YARN的一部分. 默认地,它会作为 Resource Manager(RM)的一部分来运行, 但是也可以配置成独立运行的模式.使用代理的原因就是降低通过YARN的web攻击的可能性. 在YARN中,Application Master(AM) 有责任提供web界面并把链接发给RM.这给一些可能的问题打开了大门. RM 作为一个可信的用户在运行,访问那个web地址的用户会认为可信,它提供的链接也会被认为可信,但当实际上AM作为一个不被信任的用户运行,它给RM的链接可能指向任何恶意

Core 中文文档

ASP.NET Core 中文文档 第二章 指南(1)用 Visual Studio Code 在 macOS 上创建首个 ASP.NET Core 应用程序 原文:Your First ASP.NET Core Application on a Mac Using Visual Studio Code作者:Daniel Roth.Steve Smith 以及 Rick Anderson翻译:赵志刚校对:何镇汐.刘怡(AlexLEWIS) 本节将展示如何在 macOS 平台上创建首个 ASP.N