• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# SwipeGesture
2
3用于触发滑动事件,滑动速度大于100vp/s时可识别成功。
4
5>  **说明:**
6>
7>  从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
8
9
10## 接口
11
12SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: number })
13
14**参数:**
15
16| 参数名称 | 参数类型 | 必填 | 参数描述 |
17| -------- | -------- | -------- | -------- |
18| fingers | number | 否 | 触发滑动的最少手指数,默认为1,最小为1指,最大为10指。<br/>默认值:1 |
19| direction | [SwipeDirection](#swipedirection枚举说明) | 否 | 触发滑动手势的滑动方向。<br/>默认值:SwipeDirection.All |
20| speed | number | 否 | 识别滑动的最小速度(默认为100VP/秒)。<br/>默认值:100 |
21
22## SwipeDirection枚举说明
23
24| 名称 | 描述 |
25| -------- | -------- |
26| All | 所有方向。 |
27| Horizontal | 水平方向,手指滑动方向与x轴夹角小于45度时触发。 |
28| Vertical | 竖直方向,手指滑动方向与y轴夹角小于45度时触发。 |
29| None | 任何方向均不可触发。 |
30
31
32## 事件
33
34| 名称 | 功能描述 |
35| -------- | -------- |
36| onAction(event:(event?:&nbsp;[GestureEvent](ts-gesture-settings.md#gestureevent对象说明))&nbsp;=&gt;&nbsp;void) | 滑动手势识别成功回调。 |
37
38## 示例
39
40```ts
41// xxx.ets
42@Entry
43@Component
44struct SwipeGestureExample {
45  @State rotateAngle: number = 0
46  @State speed: number = 1
47
48  build() {
49    Column() {
50      Column() {
51        Text("SwipeGesture speed\n" + this.speed)
52        Text("SwipeGesture angle\n" + this.rotateAngle)
53      }
54      .border({ width: 3 })
55      .width(300)
56      .height(200)
57      .margin(100)
58      .rotate({ angle: this.rotateAngle })
59      // 单指竖直方向滑动时触发该事件
60      .gesture(
61      SwipeGesture({ direction: SwipeDirection.Vertical })
62        .onAction((event: GestureEvent) => {
63          this.speed = event.speed
64          this.rotateAngle = event.angle
65        })
66      )
67    }.width('100%')
68  }
69}
70```
71
72 ![zh-cn_image_0000001231374559.png](figures/zh-cn_image_0000001231374559.png)