Iscroll解析

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

Iscroll的核心

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

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

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

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

  1. 检测

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

  1. start 类型事件,如:touchstart,pointerdown,MSPointerDown,mousedown.

  2. move 类型事件,如:touchmove,pointermove,MSPointerMove,mousemove。

  3. end 类型事件,如:touchend,pointerup,touchcancel等。

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

  1. 处理函数
    处理函数都是和检测事件对应的,每一类检测事件都有相应的处理函数。如:

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

  1. _move(e) 函数对应 move 类型事件。

  2. _end(e) 函数对应 end 类型事件。

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

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

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

  1. _animate(destX, destY, duration, easingFn) 是带 "transtion" 效果的运动函数,当不支持或关闭 transtion 调用该函数。此函数基于 requestAnimationFrame 做位置移动。

  2. 除了这两个内部运动函数之外,iscroll 还提供了 scrollBy,scrollTo,scrollToElement,goToPage,next,prev 等一系列的 API 供外部调用。

配置

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

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

  1. HWCompositing:是否采用 3D 加速,同时 iscroll 内部还会对客户端是否支持 perspective 属性共同决定。

  2. useTransition:是否采用 css3 的 transition,同时 iscroll 内部还会对客户端是否支持该属性共同决定。

  3. useTransform:是否采用 css3 的 transform,同时 iscroll 内部还会对客户端是否支持该属性共同决定。

  4. tap,click:iscroll 中的两个自定义事件,配置为 string,需要执行的自定义事件。

  5. eventPassthrough:默认为 undefine,为 true 时,关闭默认方向滚动(scrollY)。

  6. bindToWrapper:默认为undefine,控制初始化事件绑定到什么对象上。为 true 时,会将 touch, mousemove 等事件绑定到 iscroll 的 dom 对象。否则,绑定到 window 上。

  7. preventDefault:默认为 true,在各个运动函数中和其他值配合使用。eventPassthrough 为 true 时,设置为 false.

  8. preventDefaultException:默认值 /^(INPUT|TEXTAREA|BUTTON|SELECT)$/,和preventDefault,即内部函数isBadAndroid配合使用,在各个运动函数中执行。

  9. scrollY,scrollX:,初始值为 y 轴方向滚动,即 scrollY 为 true.

  10. freeScroll:默认为 flase,scrollX 和此值同时设置为 true 时,可想任意方向滚动。

  11. directionLockThreshold:默认值为 5,锁定方向的一个阀值,一个方向持续滑动超过这个阀值之后,才会锁定另一方向,一般不需要改动。

  12. resizePolling:默认值 60ms,控制下拉刷新时间。

  13. probeType:默认为 undefine, 可设置为1,2,3。主要用于开启监听 scroll, 值越大灵敏度越高,越耗性能。

  14. momentum:默认为 true,运动的物理引擎,对性能有影响,可关闭。

  15. snap:默认为 undefine,设置为 true 后,可按一定步长移动。

  16. snapSpeed:默认为 300ms,transitionTime 的时间。

  17. snapStepX,snapStepY:默认为 iscroll 的高度或宽度,可设为某一数字,按照相应距离移动。

  18. snapThreshold:默认为0.334,移动到下一步长的阀值系数,此值乘对应页的宽或高。

  19. bounce:默认true,是否开启弹动效果。

  20. bounceEasing:默认为 circular,弹动效果。

  21. bounceTime:默认600ms, 弹动事件

  22. disableMouse,disablePointer,disableTouch:默认为 undefine, 设为 true 时,初始化时会不注册相应事件,达到不响应的效果。

  23. mouseWheel:默认为 undefine,设置为 true 后,开启滑轮。

  24. mouseWheelSpeed:默认为 20ms。

  25. invertWheelDirection:滚动轮方向,无特殊情况不用关注。

  26. keyBindings 默认为键值对,可设置{down: 40},对应的向下键,向下移动。

方法

  1. destroy(): destory只会销毁所有绑定事件,并不会销毁 iscroll。可通过 iscroll = null 对 iscroll进行销毁。此函数还会触发 destory 事件。

  2. refresh():调整容器位置,[注意]每次新增或删除 dom 节点后需调用此方法。

  3. on(type, fn):注册 isroll 事件,可注册的函数类型为下一小节函数。

  4. off(type, fn):销毁事件。
    resetPosition(time):重置到初始位置。time 为 动效时间。

  5. disable():静止滑动

  6. enable ():可滑动。

  7. scrollBy(x, y, time, easing):增加多少像素滑动。

  8. scrollTo(x, y, time, easing):滚动到某一像素。

  9. scrollToElement(el, time, offsetX, offsetY, easing):滚动到某一元素。

  10. getComputedPosition():获得计算之后的位置,主要键盘中使用。

  11. goToPag(x, y, time, easing):滚动到某一页,snap 中使用。

  12. next():滚动到下一页,snap 中使用。

  13. prev():滚动到上一页,snap 中使用。

监听事件

  1. beforeScrollStart

  2. scrollStart

  3. scrollCancel

  4. scroll

  5. scrollEnd

  6. destroy

  7. refresh

局限

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

关键字:JavaScript, iscroll5

版权声明

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

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部