---
title: Gesture Library
questions:
  - How many milliseconds does the longTap event require to hold, and what is the maximum interval between two taps for doubleTap?
  - What performance advantages does triggering gesture events via SJS in the render layer have compared to triggering in the logic layer?
  - How to use the gesture component in TYML to wrap child elements and bindrotate, pinch, pressMove and other gesture events?
---

## Gesture Library

The gesture library enables your miniapp to recognize gestures.

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

## Usage

1. Install the npm package.

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

2. Use `<gesture></gesture>` to wrap the component to be recognized, then use `bind\*\*\*` as shown below:

```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/en/miniapp/mothra-gesture/-/tree/master/example)
-->

## Events

- touchstart: start to touch (number of fingers unlimited)

- touchmove: touch and move (number of fingers unlimited)

- touchend: stop touching (number of fingers unlimited)

- touchcancel: cancel touching (number of fingers unlimited)

- multipointStart: tap with multiple fingers to start

- multipointEnd: tap with multiple fingers to stop

- longTap: tap and hold for over 750 ms

- pinch: pinch two fingers

- rotate: rotate two fingers

- twoFingerPressMove: touch and move with two fingers

- pressMove: tap and move with one finger

- swipe: swipe

- tap: tap

- doubleTap: tap twice consecutively within 250 ms

- singleTap: tap only once

<!-- ## 属性

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

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

### Notes

Gesture events can be triggered via `SJS` in the `render layer`. If the callback function only modifies `WebView`'s `CSS` or `DOM` properties, this trigger method is recommended for better performance. Events can also be triggered in the Service layer (logic layer).