在开发移动端的应用中会使用到很多的手势操作,例如一指拖动、两指旋转等等,为了方便开放者快速集成这些手势,在Clouda中内置了事件和手势库Library.touch,下面将详细的介绍如何使用Library.touch。
手势事件处理类API目前支持以下功能:
- 事件配置
- 事件代理
- 事件绑定
- 解除事件代理
- 解除事件绑定
- 触发事件
事件配置
touch.config(config)
功能描述:
对手势事件库进行全局配置。
-
config为一个对象
{ tap: true, //tap类事件开关, 默认为true doubleTap: true, //doubleTap事件开关, 默认为true hold: true, //hold事件开关, 默认为true holdTime: 650, //hold时间长度 swipe: true, //swipe事件开关 swipeTime: 300, //触发swipe事件的最大时长 swipeMinDistance: 18, //swipe移动最小距离 swipeFactor: 5, //加速因子, 值越大变化速率越快 drag: true, //drag事件开关 pinch: true, //pinch类事件开关 }
事件代理
touch.on( delegateElement, types, selector, callback );
参数描述:
参数 | 类型 | 描述 |
---|---|---|
delegateElement | element或string | 事件代理元素或选择器 |
types | string | 手势事件的类型, 可接受多个事件以空格分开;支持原生事件的透传。目前支持的具体事件类型,详见《手势事件类型》。 |
selector | string | 代理子元素选择器, |
callback | function | 事件处理函数,如需了解手势库支持的新属性,详见《事件对象》 |
支持的手势事件类型:
分类 | 参数 | 描述 |
---|---|---|
缩放 | pinchstart | 缩放手势起点 |
pinchend | 缩放手势终点 | |
pinch | 缩放手势 | |
pinchin | 收缩 | |
pinchout | 放大 | |
旋转 | rotateleft | 向左旋转 |
rotateright | 向右旋转 | |
rotate | 旋转 | |
滑动 | swipestart | 滑动手势起点 |
swiping | 滑动中 | |
swipeend | 滑动手势终点 | |
swipeleft | 向左滑动 | |
swiperight | 向右滑动 | |
swipeup | 向上滑动 | |
swipedown | 向下滑动 | |
swipe | 滑动 | |
拖动开始 | dragstart | 拖动屏幕 |
拖动 | drag | 拖动手势 |
拖动结束 | dragend | 拖动屏幕 |
拖动 | drag | 拖动手势 |
长按 | hold | 长按屏幕 |
敲击 | tap | 单击屏幕 |
doubletap | 双击屏幕 |