iscroll.js 5+ 使用方法

06. 七月 2016 iScroll.js 1

版本

针对iScroll的优化。为了达到更高的性能,iScroll分为了多个版本。你可以选择最适合你的版本。
目前有以下版本:

  • iscroll.js,这个版本是常规应用的脚本。它包含大多数常用的功能,有很高的性能和很小的体积。
  • iscroll-lite.js,精简版本。它不支持快速跳跃,滚动条,鼠标滚轮,快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又快的解决方案。
  • iscroll-probe.js,探查当前滚动位置是一个要求很高的任务,这就是为什么我决定建立一个专门的版本。如果你需要知道滚动位置在任何给定的时间,这是iScroll给你的。(我正在做更多的测试,这可能最终在常规iscroll.js脚本,请留意)。
  • iscroll-zoom.js,在标准滚动功能上增加缩放功能。
  • iscroll-infinite.js,可以做无限缓存的滚动。处理很长的列表的元素为移动设备并非易事。 iScroll infinite版本使用缓存机制,允许你滚动一个潜在的无限数量的元素。
所属 属性名 说明 默认值
核心库

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

}

原文链接:http://iiunknown.gitbooks.io/iscroll-5-api-cn/content/


1 thought on “iscroll.js 5+ 使用方法”

口工漫画大全妖气全彩进行回复 取消回复

电子邮件地址不会被公开。