SwipeGesture

SwipeGesture is used to implement a swipe gesture, which can be recognized when the swipe speed is 100 vp/s or higher.

NOTE

This gesture is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

APIs

SwipeGesture(value?: { fingers?: number, direction?: SwipeDirection, speed?: number })

Atomic service API: This API can be used in atomic services since API version 11.

Parameters

Name	Type	Mandatory	Description
fingers	number	No	Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10. Default value: 1
direction	swipeDirection	No	Swipe direction. Default value: SwipeDirection.All
speed	number	No	Minimum speed of the swipe gesture. Default value: 100 vp/s NOTE If the value is less than or equal to 0, it will be converted to the default value.
isFingerCountLimited¹⁵⁺	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. Default value: false

SwipeDirection

Atomic service API: This API can be used in atomic services since API version 11.

Name	Description
All	All directions.
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.
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.
None	Swiping disabled.

Events

Name	Description
onAction(event:(event: GestureEvent) => void)	Invoked when the swipe gesture is recognized. Atomic service API: This API can be used in atomic services since API version 11.

Attributes

Name	Type	Description
tag¹¹⁺	string	Tag for the swipe gesture. It is used to distinguish the gesture during custom gesture judgment. Atomic service API: This API can be used in atomic services since API version 11.
allowedTypes¹⁴⁺	Array<SourceTool>	Allowed event input types for the swipe gesture. Atomic service API: This API can be used in atomic services since API version 14.

Example

This example demonstrates the recognition of a swipe gesture using SwipeGesture.

// xxx.ets
@Entry
@Component
struct SwipeGestureExample {
  @State rotateAngle: number = 0
  @State speed: number = 1

  build() {
    Column() {
      Column() {
        Text("SwipeGesture speed\n" + this.speed)
        Text("SwipeGesture angle\n" + this.rotateAngle)
      }
      .border({ width: 3 })
      .width(300)
      .height(200)
      .margin(100)
      .rotate({ angle: this.rotateAngle })
      // The gesture event is triggered by swiping vertically with one finger.
      .gesture(
      SwipeGesture({ direction: SwipeDirection.Vertical })
        .onAction((event: GestureEvent) => {
          if (event) {
            this.speed = event.speed
            this.rotateAngle = event.angle
          }
        })
      )
    }.width('100%')
  }
}