• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# SwipeGesture
2
3**SwipeGesture** is used to implement a swipe gesture, which can be recognized when the swipe speed is 100 vp/s or higher.
4
5>  **NOTE**
6>
7>  This gesture is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## APIs
11
12SwipeGesture(value?: { fingers?: number, direction?: SwipeDirection, speed?: number })
13
14**Atomic service API**: This API can be used in atomic services since API version 11.
15
16**Parameters**
17
18| Name| Type| Mandatory| Description|
19| -------- | -------- | -------- | -------- |
20| fingers | number | No| Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10.<br>Default value: **1**|
21| direction | [swipeDirection](#swipedirection)| No| Swipe direction.<br>Default value: **SwipeDirection.All**|
22| speed | number | No| Minimum speed of the swipe gesture.<br>Default value: 100 vp/s<br>**NOTE**<br>If the value is less than or equal to 0, it will be converted to the default value.|
23| isFingerCountLimited<sup>15+</sup> | boolean | No| Whether to enforce the exact number of fingers touching the screen. With the value **true**, the gesture recognition fails if the number of fingers touching the screen does not match the configured value of **fingers**.<br>Default value: **false**|
24
25## SwipeDirection
26
27**Atomic service API**: This API can be used in atomic services since API version 11.
28
29| Name| Description|
30| -------- | -------- |
31| All | All directions.|
32| Horizontal | Horizontal direction. The gesture event is triggered when the angle between the finger moving direction and the x-axis is less than 45 degrees.|
33| Vertical | Vertical direction. The gesture event is triggered when the angle between the finger moving direction and the y-axis is less than 45 degrees.|
34| None | Swiping disabled.|
35
36
37## Events
38
39| Name| Description|
40| -------- | -------- |
41| onAction(event:(event: [GestureEvent](ts-gesture-settings.md#gestureevent)) =&gt; void) | Invoked when the swipe gesture is recognized.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
42
43## Attributes
44
45| Name| Type   |Description                                       |
46| ----  | ------  | ---------------------------------------- |
47| tag<sup>11+</sup>   | string  | Tag for the swipe gesture. It is used to distinguish the gesture during custom gesture judgment.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
48| allowedTypes<sup>14+</sup> | Array\<[SourceTool](ts-gesture-settings.md#sourcetool9)> | Allowed event input types for the swipe gesture.<br>**Atomic service API**: This API can be used in atomic services since API version 14.|
49
50## Example
51
52This example demonstrates the recognition of a swipe gesture using **SwipeGesture**.
53
54```ts
55// xxx.ets
56@Entry
57@Component
58struct SwipeGestureExample {
59  @State rotateAngle: number = 0
60  @State speed: number = 1
61
62  build() {
63    Column() {
64      Column() {
65        Text("SwipeGesture speed\n" + this.speed)
66        Text("SwipeGesture angle\n" + this.rotateAngle)
67      }
68      .border({ width: 3 })
69      .width(300)
70      .height(200)
71      .margin(100)
72      .rotate({ angle: this.rotateAngle })
73      // The gesture event is triggered by swiping vertically with one finger.
74      .gesture(
75      SwipeGesture({ direction: SwipeDirection.Vertical })
76        .onAction((event: GestureEvent) => {
77          if (event) {
78            this.speed = event.speed
79            this.rotateAngle = event.angle
80          }
81        })
82      )
83    }.width('100%')
84  }
85}
86```
87
88 ![en-us_image_0000001231374559.png](figures/en-us_image_0000001231374559.png)
89