# PanGesture ## 接口 PanGesture\(options?: \{ fingers?: number, direction?: PanDirection, distance?: number \} | [PanGestureOption](#section14214195212149)\) - 参数

参数名称	参数类型	必填	默认值	参数描述
fingers	number	否	1	触发滑动的最少手指数，最小为1指，最大取值为10指。
direction	PanDirection	否	All	设置滑动方向，此枚举值支持逻辑与(&)和逻辑或（\|）运算。
distance	number	否	5.0	最小滑动识别距离，单位为vp。

- PanDirection枚举说明

名称	描述
All	所有方向可滑动。
Horizontal	水平方向可滑动。
Vertical	竖直方向可滑动。
Left	向左滑动。
Right	向右滑动。
Up	向上滑动。
Down	向下滑动。
None	任何方向都不可滑动。

### PanGestureOption 通过PanGestureOption对象接口可以动态修改滑动手势识别器的属性，从而避免通过状态变量修改属性（状态变量修改会导致UI刷新）。 PanGestureOption\(options?: \{ fingers?: number, direction?: PanDirection, distance?: number \}\) - 参数同[PanGesture](#li118312377710)参数说明。 - 接口

名称	功能描述
setDirection(value: PanDirection)	设置direction属性。
setDistance(value: number)	设置distance属性。
setFingers(value: number)	设置fingers属性。

## 事件

名称		功能描述
onActionStart((event?: GestureEvent) => void)		Pan手势识别成功回调。
onActionUpdate((event?: GestureEvent) => void)		Pan手势移动过程中回调。
onActionEnd((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) } .height(100).width(200).padding(20).border({ width: 1 }).margin(80) .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') }) ) } } ``` ![](figures/PanGesture.gif)