Iscroll解析

2016-07-13 22:57:00

做了一些移动端的产品，发现一些滚动效果很多会使用 iscroll 作为底层库（如阿里小蜜）。iscroll 的文档已经好久没更新了，而且比较简单，经常需要直接读源码。这里写一篇总结，作为对 iscroll API的整理。而 iscroll 的库 probe，lite，zoom，infinite 和标准库等多个版本，而 probe 是平时运用的比较多的一个库，除了 iscroll 的标准库之外，还有 snap（广义翻页）功能。这里主要以 probe 做整理。去掉里面的 scrollbars/indicators 部分，因为这两部分内容一般视觉不会有太多要求。但这一部分的内容在 iscroll 库中和 iscroll 的主体内容同等地位，个人觉得没有必要。

Iscroll的核心

仔细想想，如果我们要实现类似功能的触控库，我们会怎么做？正常思路大概就是：

检测 ->  处理数据 -> 产生位移

思路大概就是这样，和现实生活中的控制很类似：通过传感器检测数据，而我们这里的检测设备就是注册的一系列事件。检测到的数据往往属于原始数据，没有办法直接使用，这里就需要进行相应的处理。处理完后，就需要滚动屏幕，对应到实现就是操作 dom 的位置属性。

仔细看了一下 iscroll 的源码，果然也是采用类似的思路，一下是 iscroll 核心处理逻辑：

检测

首先，iscroll 检测是每次初始化的时候，通过 HandEvent 注册一系列的函数。为了同时兼容无线和 PC 等多个端，同一类型的事件需要注册多个。简单的分有以下几类：

start 类型事件，如：touchstart，pointerdown，MSPointerDown，mousedown.
move 类型事件，如：touchmove，pointermove，MSPointerMove，mousemove。
end 类型事件，如：touchend，pointerup，touchcancel等。

除了以上三个，还有 transitionend，wheel，keydown，click 等一系列事件。

处理函数
处理函数都是和检测事件对应的，每一类检测事件都有相应的处理函数。如：

_start(e) 函数对应 start 类型事件。

_move(e) 函数对应 move 类型事件。
_end(e) 函数对应 end 类型事件。

除此之外，还有 _transitionEnd(e)，_wheel(e)，_key(e) 等处理函数。

运动函数
处理函数处理好相应数据和逻辑之后，会在处理函数中调用运动相关的函数。而运动相关的函数主要做一些位移变换，iscroll 对这些位移变换做了很多兼容性的处理。

_translate( x, y) 是平移运动的核心函数。其中支持 transform 和 "left" 两种移动方式。

_animate(destX, destY, duration, easingFn) 是带 "transtion" 效果的运动函数，当不支持或关闭 transtion 调用该函数。此函数基于 requestAnimationFrame 做位置移动。
除了这两个内部运动函数之外，iscroll 还提供了 scrollBy，scrollTo，scrollToElement，goToPage，next，prev 等一系列的 API 供外部调用。

配置

var myScroll = new IScroll('# wrapper', {    mouseWheel: true,    scrollbars: true});

初始化出入的第二个参数为配置，会挂载到 myScroll 的 options 属性上。

HWCompositing：是否采用 3D 加速，同时 iscroll 内部还会对客户端是否支持 perspective 属性共同决定。
useTransition：是否采用 css3 的 transition，同时 iscroll 内部还会对客户端是否支持该属性共同决定。
useTransform：是否采用 css3 的 transform，同时 iscroll 内部还会对客户端是否支持该属性共同决定。
tap,click：iscroll 中的两个自定义事件，配置为 string,需要执行的自定义事件。
eventPassthrough：默认为 undefine,为 true 时，关闭默认方向滚动（scrollY）。
bindToWrapper：默认为undefine，控制初始化事件绑定到什么对象上。为 true 时，会将 touch, mousemove 等事件绑定到 iscroll 的 dom 对象。否则，绑定到 window 上。
preventDefault：默认为 true，在各个运动函数中和其他值配合使用。eventPassthrough 为 true 时，设置为 false.
preventDefaultException：默认值 /^(INPUT|TEXTAREA|BUTTON|SELECT)$/，和preventDefault，即内部函数isBadAndroid配合使用，在各个运动函数中执行。
scrollY,scrollX:，初始值为 y 轴方向滚动，即 scrollY 为 true.
freeScroll：默认为 flase，scrollX 和此值同时设置为 true 时，可想任意方向滚动。
directionLockThreshold：默认值为 5，锁定方向的一个阀值，一个方向持续滑动超过这个阀值之后，才会锁定另一方向，一般不需要改动。
resizePolling：默认值 60ms，控制下拉刷新时间。
probeType：默认为 undefine, 可设置为1，2，3。主要用于开启监听 scroll，值越大灵敏度越高，越耗性能。
momentum：默认为 true，运动的物理引擎，对性能有影响，可关闭。
snap：默认为 undefine，设置为 true 后，可按一定步长移动。
snapSpeed：默认为 300ms，transitionTime 的时间。
snapStepX,snapStepY：默认为 iscroll 的高度或宽度，可设为某一数字，按照相应距离移动。
snapThreshold：默认为0.334，移动到下一步长的阀值系数，此值乘对应页的宽或高。
bounce：默认true，是否开启弹动效果。
bounceEasing：默认为 circular，弹动效果。
bounceTime：默认600ms, 弹动事件
disableMouse,disablePointer,disableTouch：默认为 undefine, 设为 true 时，初始化时会不注册相应事件，达到不响应的效果。
mouseWheel：默认为 undefine，设置为 true 后，开启滑轮。
mouseWheelSpeed：默认为 20ms。
invertWheelDirection：滚动轮方向，无特殊情况不用关注。
keyBindings 默认为键值对，可设置{down: 40}，对应的向下键，向下移动。

方法

destroy()： destory只会销毁所有绑定事件，并不会销毁 iscroll。可通过 iscroll = null 对 iscroll进行销毁。此函数还会触发 destory 事件。
refresh()：调整容器位置，［注意］每次新增或删除 dom 节点后需调用此方法。
on(type, fn)：注册 isroll 事件，可注册的函数类型为下一小节函数。
off(type, fn)：销毁事件。
resetPosition(time)：重置到初始位置。time 为动效时间。
disable()：静止滑动
enable ()：可滑动。
scrollBy(x, y, time, easing)：增加多少像素滑动。
scrollTo(x, y, time, easing)：滚动到某一像素。
scrollToElement(el, time, offsetX, offsetY, easing)：滚动到某一元素。
getComputedPosition()：获得计算之后的位置，主要键盘中使用。
goToPag(x, y, time, easing)：滚动到某一页，snap 中使用。
next()：滚动到下一页，snap 中使用。
prev()：滚动到上一页，snap 中使用。

监听事件

beforeScrollStart
scrollStart
scrollCancel
scroll
scrollEnd
destroy
refresh

局限

iscroll 有很多优点，最主要的是相对稳定，还有一系列兼容性处理。但他有一些局限性，主要的局限性是它的可扩展性较差。一个栗子：当我们想对某一元素进行拖拽时，会发现很难用 iscroll。而产生这一问题的主要原因时：iscroll 的 scroll 等监听事件是在元素移动时才会触发。也就说 iscroll 没有暴露出触控 api 给用户使用。

关键字：JavaScript, iscroll5

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击举报进行投诉反馈！