Iscroll解析

时间:2021-11-18 17:58:51

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

Iscroll的核心

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

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

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

仔细看了一下 iscroll 的源码,果然也是采用类似的思路,一下是 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 给用户使用。