描述:用于触发拖动手势事件,滑动的最小距离为5vp时拖动手势识别成功。
Api:从API Version 7开始支持
接口:
PanGesture(value?: { fingers?: number; direction?: PanDirection; distance?: number } | PanGestureOptions)
参数:
参数名称 | 参数类型 | 必填 | 参数描述 |
---|---|---|---|
fingers | number | 否 | 触发拖动的最少手指数,最小为1指, 最大取值为10指。默认值:1 |
direction | PanDirection | 否 | 触发拖动的手势方向,此枚举值支持逻辑与(&)和逻辑或( |
distance | number | 否 | 最小拖动识别距离,单位为vp。默认值:5.0说明:> tab滑动与该拖动手势事件同时存在时,可将distance值设为1,使拖动更灵敏,避免造成事件错乱。 |
事件:
名称 | 功能描述 |
---|---|
onActionStart(event: (event?:GestureEvent) => void) | Pan手势识别成功回调。 |
onActionUpdate(event: (event?:GestureEvent) => void) | Pan手势移动过程中回调。 |
onActionEnd(event: (event?:GestureEvent) => void) | Pan手势识别成功,手指抬起后触发回调。 |
onActionCancel(event: () => void) | Pan手势识别成功,接收到触摸取消事件触发回调。 |
枚举类型参考:
示例代码:
- @Entry
- @Component
- struct PanGestureExample {
- @State offsetX: number = 0
- @State offsetY: number = 0
-
- build() {
- Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
- Text('PanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
- .fontSize(20)
- }
- .height(300).width(300).border({ width: 1 }).margin(30)
- .translate({ x: this.offsetX, y: this.offsetY, z: 5 })
- .gesture(
- PanGesture({})
- .onActionStart((event: GestureEvent) => {
- console.info('Pan start')
- })
- .onActionUpdate((event: GestureEvent) => {
- this.offsetX = event.offsetX
- this.offsetY = event.offsetY
- })
- .onActionEnd(() => {
- console.info('Pan end')
- })
- )
- }
- }
示例效果
代码地址:HarmonyOSAPP开发相关组件: 深圳市蛟龙腾飞网络科技有限公司 - Gitee.com