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/> **说明:** 仅支持鼠标滚轮,取值范围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 122