• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# SwipeGesture
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @jiangtao92-->
5<!--Designer: @piggyguy-->
6<!--Tester: @songyanhong-->
7<!--Adviser: @HelloCrease-->
8
9用于触发滑动事件,滑动速度大于速度阈值时可识别成功,默认最小速度为100vp/s。
10
11>  **说明:**
12>
13>  从API version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
14
15
16## 接口
17
18### SwipeGesture
19
20SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: number })
21
22继承自[GestureInterface\<T>](ts-gesture-common.md#gestureinterfacet11),设置滑动手势事件。
23
24**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
25
26**系统能力:** SystemCapability.ArkUI.ArkUI.Full
27
28**参数:**
29
30| 参数名 | 类型 | 必填 | 说明 |
31| -------- | -------- | -------- | -------- |
32| value | { fingers?: number; direction?: SwipeDirection; speed?: number } | 否 | 设置滑动事件参数。 <br> - fingers:触发滑动的最少手指数,默认为1,最小为1指,最大为10指。<br/>默认值:1 <br> - direction:触发滑动手势的滑动方向。<br/>默认值:SwipeDirection.All <br> - speed:识别滑动的最小速度。<br/>默认值:100VP/s <br/>**说明:** <br/>当滑动速度的值小于等于0时,会被转化为默认值。 |
33
34### SwipeGesture<sup>15+</sup>
35
36SwipeGesture(options?: SwipeGestureHandlerOptions)
37
38设置滑动手势事件。与[SwipeGesture](#swipegesture-1)相比,options参数新增了对isFingerCountLimited参数,表示是否检查触摸屏幕的手指数量。
39
40**原子化服务API:** 从API version 15开始,该接口支持在原子化服务中使用。
41
42**系统能力:** SystemCapability.ArkUI.ArkUI.Full
43
44**参数:**
45
46| 参数名 | 类型 | 必填 | 说明 |
47| -------- | -------- | -------- | -------- |
48| options | [SwipeGestureHandlerOptions](./ts-gesturehandler.md#swipegesturehandleroptions) | 否 | 滑动事件处理器配置参数。 |
49
50## SwipeDirection枚举说明
51
52**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
53
54**系统能力:** SystemCapability.ArkUI.ArkUI.Full
55
56| 名称 | 值 | 说明 |
57| ---- | -- | ----- |
58| All | - | 所有方向。 |
59| Horizontal | - | 水平方向,手指滑动方向与x轴夹角小于45度时触发。 |
60| Vertical | - | 竖直方向,手指滑动方向与y轴夹角小于45度时触发。 |
61| None | - | 任何方向均不可触发。 |
62
63
64## 事件
65
66>  **说明:**
67>
68>  在[GestureEvent](ts-gesture-common.md#gestureevent对象说明)的fingerList元素中,手指索引编号与位置相对应,即fingerList[index]的id为index。对于先按下但未参与当前手势触发的手指,fingerList中对应的位置为空。建议优先使用fingerInfos。
69
70**原子化服务API:** 从API version 8开始,该接口支持在原子化服务中使用。
71
72**系统能力:** SystemCapability.ArkUI.ArkUI.Full
73
74### onAction
75
76onAction(event: (event: GestureEvent) => void)
77
78Swipe手势识别成功时触发回调。
79
80**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
81
82**系统能力:** SystemCapability.ArkUI.ArkUI.Full
83
84**参数:**
85
86| 参数名 | 类型                                       | 必填 | 说明                         |
87| ------ | ------------------------------------------ | ---- | ---------------------------- |
88| event  |  (event: [GestureEvent](ts-gesture-common.md#gestureevent对象说明)) => void | 是   | 手势事件回调函数。 |
89
90## 示例
91
92该示例通过配置SwipeGesture实现了滑动手势的识别。
93
94```ts
95// xxx.ets
96@Entry
97@Component
98struct SwipeGestureExample {
99  @State rotateAngle: number = 0;
100  @State speed: number = 1;
101
102  build() {
103    Column() {
104      Column() {
105        Text("SwipeGesture speed\n" + this.speed)
106        Text("SwipeGesture angle\n" + this.rotateAngle)
107      }
108      .border({ width: 3 })
109      .width(300)
110      .height(200)
111      .margin(100)
112      .rotate({ angle: this.rotateAngle })
113      // 单指竖直方向滑动时触发该事件
114      .gesture(
115      SwipeGesture({ direction: SwipeDirection.Vertical })
116        .onAction((event: GestureEvent) => {
117          if (event) {
118            this.speed = event.speed
119            this.rotateAngle = event.angle
120          }
121        })
122      )
123    }.width('100%')
124  }
125}
126```
127
128 ![zh-cn_image_0000001231374559.png](figures/zh-cn_image_0000001231374559.png)