• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 轴事件
2
3轴事件指组件被鼠标滚轮滚动或触控板双指沿特定方向(轴)滑动进行交互时触发的事件。此处“轴”指的是二维坐标系中的方向,分为水平方向(X轴)和垂直方向(Y轴)。
4
5>  **说明:**
6>
7>  从API Version 17开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
8
9## onAxisEvent
10
11onAxisEvent(event: (event: AxisEvent) => void): T
12
13鼠标滚轮滚动或触控板双指移动触发该回调。
14
15**卡片能力:** 从API version 17开始,该接口支持在ArkTS卡片中使用。
16
17**原子化服务API:** 从API version 17开始,该接口支持在原子化服务中使用。
18
19**系统能力:** SystemCapability.ArkUI.ArkUI.Full
20
21**参数:**
22
23| 参数名 | 类型                              | 必填 | 说明                 |
24| ------ | --------------------------------- | ---- | -------------------- |
25| event  | [AxisEvent](#axisevent) | 是   | 获得[AxisEvent](#axisevent)对象。 |
26
27**返回值:**
28
29| 类型 | 说明 |
30| -------- | -------- |
31| T | 返回当前组件。 |
32
33## AxisEvent
34
35轴事件的对象说明,继承于[BaseEvent](ts-gesture-customize-judge.md#baseevent对象说明8)。
36
37**原子化服务API:** 从API version 17开始,该接口支持在原子化服务中使用。
38
39**系统能力:** SystemCapability.ArkUI.ArkUI.Full
40
41### 属性
42
43| 名称            | 类型  | 只读|可选                              | 说明                                                    |
44| ------------------- | -----------------------|------|----- | -------------------------------------------------------- |
45| action              | [AxisAction](ts-appendix-enums.md#axisaction17)           | 是   | 否   | 轴事件的动作类型                   |
46| x                   | number                 | 是   | 否   | 鼠标光标相对于被点击元素左边缘的X坐标。<br/>单位:vp  |
47| y                   | number                 | 是   | 否   | 鼠标光标相对于被点击元素上边缘的Y坐标。<br/>单位:vp  |
48| windowX             | number                 | 是   | 否   | 鼠标光标相对于当前窗口左上角的X坐标。<br/>单位:vp |
49| windowY             | number                 | 是   | 否   | 鼠标光标相对于当前窗口左上角的Y坐标。<br/>单位:vp |
50| displayX            | number                 | 是   | 否   | 鼠标光标相对于当前屏幕左上角的X坐标。<br/>单位:vp |
51| displayY            | number                 | 是   | 否   | 鼠标光标相对于当前屏幕左上角的Y坐标。<br/>单位:vp |
52| scrollStep          | number                 | 是   | 否   | 鼠标轴滚动步长配置。<br/> **说明:**&nbsp;仅支持鼠标滚轮,取值范围0~65535。|
53| propagation         | Callback\<void>        | 是   | 否   | 激活事件冒泡。   |
54
55### getHorizontalAxisValue
56
57getHorizontalAxisValue(): number
58
59获取此次轴事件的水平轴值。
60
61**原子化服务API:** 从API version 17开始,该接口支持在原子化服务中使用。
62
63**系统能力:** SystemCapability.ArkUI.ArkUI.Full
64
65**返回值:**
66
67| 类型              |说明       |
68| ------- | --------------------------------- |
69| number | 水平轴值。 |
70
71### getVerticalAxisValue
72
73getVerticalAxisValue(): number
74
75获取此次轴事件的垂直轴值。
76
77**原子化服务API:** 从API version 17开始,该接口支持在原子化服务中使用。
78
79**系统能力:** SystemCapability.ArkUI.ArkUI.Full
80
81**返回值:**
82
83| 类型              |说明       |
84| ------- | --------------------------------- |
85| number | 垂直轴值。 |
86
87## 示例
88
89该示例通过按钮设置了轴事件,在按钮上滚动鼠标滚轮可获取轴事件的相关参数。
90
91```ts
92// xxx.ets
93@Entry
94@Component
95struct AxisEventExample {
96  @State text: string = ''
97
98  build() {
99    Column() {
100      Row({ space: 20 }) {
101        Button('AxisEvent').width(100).height(40)
102          .onAxisEvent((event?: AxisEvent) => {
103            if (event) {
104              this.text =
105                'AxisEvent:' + '\n  action:' + event.action + '\n  displayX:' + event.displayX + '\n  displayY:' +
106                event.displayY + '\n  windowX:' + event.windowX + '\n  windowY:' + event.windowY + '\n  x:' + event.x +
107                  '\n  y:' + event.y + '\n VerticalAxisValue:' + event.getVerticalAxisValue() +
108                  '\n HorizontalAxisValue:' + event.getHorizontalAxisValue()
109            }
110          })
111      }.margin(20)
112
113      Text(this.text).margin(15)
114    }.width('100%')
115  }
116}
117```
118
119鼠标滚轮滚动时:
120
121![onAxisEvent](figures/onAxisEvent.png)
122