---
title: 小程序手势库
questions:
  - 手势库的 longTap 事件需要长按多少毫秒触发，doubleTap 要求两次敲击间隔多少毫秒以内？
  - 手势事件通过 SJS 在渲染层触发与在逻辑层触发相比有什么性能优势？
  - 如何在 TYML 中使用 gesture 组件包裹子元素并绑定 rotate、pinch、pressMove 等手势事件？
---

## 小程序手势库

这个手势库可以使小程序拥有识别手势的能力。

<!-- 本代码部分参考自 [AlloyFinger](https://github.com/AlloyTeam/AlloyFinger)。 -->

## 使用方法

1. 安装 npm 包。

```js
yarn add @tuya-miniapp/miniapp-gesture
```

2. 使用 `<gesture></gesture>` 包裹要识别的组件，然后 `bind\*\*\*` 即可, 如下:

```xml
// tyml
<sjs module="anim" src="./anim.sjs"></sjs>

<gesture
  bind:rotate="{{anim.rotate}}"
  bind:multipointStart="{{anim.multitouchstart}}"
  bind:pinch="{{anim.pinch}}"
  bind:pressMove="{{anim.pressmove}}"
  bind:twoFingerPressMove="{{anim.pressmove}}"
>
  <view class="test" id="test"></view>
</gesture>
```

```json
// json
{
  "disableScroll": true,
  "usingComponents": {
    "gesture": "@tuya-miniapp/miniapp-gesture/gesture"
  }
}
```

<!--
> 完整使用示例请参考 [example](https://registry.code.tuya-inc.top/cn/miniapp/mothra-gesture/-/tree/master/example)
-->

## 事件

- touchstart 触摸开始（手指数不限）

- touchmove 触摸移动（手指数不限）

- touchend 触摸结束（手指数不限）

- touchcancel 触摸取消（手指数不限）

- multipointStart 多指点按开始

- multipointEnd 多指点按结束

- longTap 长按 750 ms 以上

- pinch 双指捏合

- rotate 双指旋转

- twoFingerPressMove 双指移动

- pressMove 单指点按移动

- swipe 滑动

- tap 点击

- doubleTap 250 ms 内连续敲击两次

- singleTap 敲击一次

<!-- ## 属性

- propagation：touchstart, touchmove, touchend 是否事件向上冒泡到父节点，Boolean 类型，默认为 true

- requireFailure：同时绑定 singleTap, doubleTap 的时候，当用户触发 doubleTap 事件，是否会同时触发 singleTap，这个概念和 iOS 设备的 require(toFail:) 概念一致，Boolean 类型，默认为 true -->

### 注意事项

手势事件可以利用 `SJS` 在 `渲染层` 触发。如果回调函数，只是修改 `WebView` 的 `CSS` 属性、 `DOM` 属性，建议采取此种触发方式，性能较高。也可以在 Service 层 (逻辑层) 触发。