Iscroll解析

Posted 2020-08-21 雪松

做了一些移动端的产品，发现一些滚动效果很多会使用 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 给用户使用。