1# SwipeGesture 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @jiangtao92--> 5<!--Designer: @piggyguy--> 6<!--Tester: @songyanhong--> 7<!--Adviser: @HelloCrease--> 8 9**SwipeGesture** is used to trigger a swipe gesture. This gesture is successfully recognized when the swipe speed exceeds the specified threshold, which is 100 vp/s by default. 10 11> **NOTE** 12> 13> This gesture is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 14 15 16## APIs 17 18### SwipeGesture 19 20SwipeGesture(value?: { fingers?: number, direction?: SwipeDirection, speed?: number }) 21 22Sets the parameters for the swipe gesture. 23 24**Atomic service API**: This API can be used in atomic services since API version 11. 25 26**System capability**: SystemCapability.ArkUI.ArkUI.Full 27 28**Parameters** 29 30| Name| Type| Mandatory| Description| 31| -------- | -------- | -------- | -------- | 32| value | { fingers?: number, direction?: SwipeDirection, speed?: number } | No| Parameters for the swipe gesture.<br> - **fingers**: minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10.<br>Default value: **1**<br> - **direction**: swipe direction.<br>Default value: **SwipeDirection.All**<br> - **speed**: 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.| 33 34### SwipeGesture<sup>15+</sup> 35 36SwipeGesture(options?: SwipeGestureHandlerOptions) 37 38Sets the parameters for the swipe gesture. Compared with [SwipeGesture](#swipegesture-1), this API adds the **isFingerCountLimited** parameter to **options**, which determines whether to enforce the exact number of fingers touching the screen. 39 40**Atomic service API**: This API can be used in atomic services since API version 15. 41 42**System capability**: SystemCapability.ArkUI.ArkUI.Full 43 44**Parameters** 45 46| Name| Type| Mandatory| Description| 47| -------- | -------- | -------- | -------- | 48| options | [SwipeGestureHandlerOptions](./ts-uigestureevent.md#swipegesturehandleroptions) | No| Parameters of the swipe gesture handler.| 49 50## SwipeDirection 51 52**Atomic service API**: This API can be used in atomic services since API version 11. 53 54**System capability**: SystemCapability.ArkUI.ArkUI.Full 55 56| Name| Value| Description| 57| ---- | -- | ----- | 58| All | - | All directions.| 59| 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.| 60| 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.| 61| None | - | Swiping disabled.| 62 63 64## Events 65 66> **NOTE** 67> 68> In **fingerList** of [GestureEvent](ts-gesture-settings.md#gestureevent), the index of a finger corresponds to its position, that is, the ID of a finger in **fingerList[index]** refers to its index. If a finger is pressed first and does not participate in triggering of the current gesture, its position in **fingerList** is left empty. You are advised to use **fingerInfos** when possible. 69 70**Atomic service API**: This API can be used in atomic services since API version 8. 71 72**System capability**: SystemCapability.ArkUI.ArkUI.Full 73 74### onAction 75 76onAction(event: (event: GestureEvent) => void) 77 78Invoked when the swipe gesture is recognized. 79 80**Atomic service API**: This API can be used in atomic services since API version 11. 81 82**System capability**: SystemCapability.ArkUI.ArkUI.Full 83 84**Parameters** 85 86| Name| Type | Mandatory| Description | 87| ------ | ------------------------------------------ | ---- | ---------------------------- | 88| event | (event: [GestureEvent](ts-gesture-settings.md#gestureevent)) => void | Yes | Callback for the gesture event.| 89 90## Attributes 91 92**System capability**: SystemCapability.ArkUI.ArkUI.Full 93 94| Name| Type | Read-Only| Optional| Description | 95| ---- | ------ | ---- | ---- |-------------------- | 96| tag<sup>11+</sup> | string | No| No| 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.| 97| allowedTypes<sup>14+</sup> | Array\<[SourceTool](ts-gesture-settings.md#sourcetool9)> | No| No| Allowed event input types for the swipe gesture.<br>**Atomic service API**: This API can be used in atomic services since API version 14.| 98 99## Example 100 101This example demonstrates the recognition of a swipe gesture using **SwipeGesture**. 102 103```ts 104// xxx.ets 105@Entry 106@Component 107struct SwipeGestureExample { 108 @State rotateAngle: number = 0; 109 @State speed: number = 1; 110 111 build() { 112 Column() { 113 Column() { 114 Text("SwipeGesture speed\n" + this.speed) 115 Text("SwipeGesture angle\n" + this.rotateAngle) 116 } 117 .border({ width: 3 }) 118 .width(300) 119 .height(200) 120 .margin(100) 121 .rotate({ angle: this.rotateAngle }) 122 // The gesture event is triggered by swiping vertically with one finger. 123 .gesture( 124 SwipeGesture({ direction: SwipeDirection.Vertical }) 125 .onAction((event: GestureEvent) => { 126 if (event) { 127 this.speed = event.speed 128 this.rotateAngle = event.angle 129 } 130 }) 131 ) 132 }.width('100%') 133 } 134} 135``` 136 137  138
