> 文档中心 > HarmonyOS应用API手势方法-PanGesture

HarmonyOS应用API手势方法-PanGesture

描述:用于触发拖动手势事件,滑动的最小距离为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@Componentstruct 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

 

郁金香导航