1# PanGesture 2 3用于触发拖动手势事件，滑动的最小距离为5vp时拖动手势识别成功。 4 5> **说明：** 6> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 7 8 9## 接口 10 11PanGesture(value?: { fingers?: number, direction?: PanDirection, distance?: number } | [PanGestureOptions](#pangestureoptions)) 12 13**参数：** 14 15| 参数名称 | 参数类型 | 必填 | 参数描述 | 16| --------- | ------------ | ---- | ------------------------------------------------------------ | 17| fingers | number | 否 | 触发拖动的最少手指数，最小为1指， 最大取值为10指。<br/>默认值：1 | 18| direction | PanDirection | 否 | 触发拖动的手势方向，此枚举值支持逻辑与(&)和逻辑或（\|）运算。<br/>默认值：PanDirection.All | 19| distance | number | 否 | 最小拖动识别距离，单位为vp。<br/>默认值：5.0<br/>**说明：**<br/>> [Tabs组件](ts-container-tabs.md)滑动与该拖动手势事件同时存在时，可将distance值设为1，使拖动更灵敏，避免造成事件错乱。 | 20 21## PanDirection枚举说明 22 23| 名称 | 描述 | 24| -------- | -------- | 25| All | 所有方向。 | 26| Horizontal | 水平方向。 | 27| Vertical | 竖直方向。 | 28| Left | 向左拖动。 | 29| Right | 向右拖动。 | 30| Up | 向上拖动。 | 31| Down | 向下拖动。 | 32| None | 任何方向都不可触发拖动手势事件。 | 33 34 35## PanGestureOptions 36 37通过PanGestureOptions对象接口可以动态修改滑动手势识别器的属性，从而避免通过状态变量修改属性（状态变量修改会导致UI刷新）。 38 39PanGestureOptions(options?: { fingers?: number, direction?: PanDirection, distance?: number }) 40 41**参数：** 42 43 同PanGesture参数说明。 44 45**接口：** 46 47| 名称 | 功能描述 | 48| -------- | -------- | 49| setDirection(value: PanDirection) | 设置direction属性。 | 50| setDistance(value: number) | 设置distance属性。 | 51| setFingers(value: number) | 设置fingers属性。 | 52 53 54## 事件 55 56| 名称 | 功能描述 | 57| -------- | -------- | 58| onActionStart(event: (event?: [GestureEvent](ts-gesture-settings.md)) => void) | Pan手势识别成功回调。 | 59| onActionUpdate(event: (event?: [GestureEvent](ts-gesture-settings.md)) => void) | Pan手势移动过程中回调。 | 60| onActionEnd(event: (event?: [GestureEvent](ts-gesture-settings.md)) => void) | Pan手势识别成功，手指抬起后触发回调。 | 61| onActionCancel(event: () => void) | Pan手势识别成功，接收到触摸取消事件触发回调。 | 62 63 64## 示例 65 66```ts 67// xxx.ets 68@Entry 69@Component 70struct PanGestureExample { 71 @State offsetX: number = 0; 72 @State offsetY: number = 0; 73 @State positionX: number = 0; 74 @State positionY: number = 0; 75 private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right }); 76 77 build() { 78 Column() { 79 Column() { 80 Text('PanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY) 81 } 82 .height(200) 83 .width(300) 84 .padding(20) 85 .border({ width: 3 }) 86 .margin(50) 87 .translate({ x: this.offsetX, y: this.offsetY, z: 0 }) 88 // 左右拖动触发该手势事件 89 .gesture( 90 PanGesture(this.panOption) 91 .onActionStart((event: GestureEvent) => { 92 console.info('Pan start'); 93 }) 94 .onActionUpdate((event: GestureEvent) => { 95 this.offsetX = this.positionX + event.offsetX; 96 this.offsetY = this.positionY + event.offsetY; 97 }) 98 .onActionEnd(() => { 99 this.positionX = this.offsetX; 100 this.positionY = this.offsetY; 101 console.info('Pan end'); 102 }) 103 ) 104 105 Button('修改PanGesture触发条件') 106 .onClick(() => { 107 // 将PanGesture手势事件触发条件改为双指以任意方向拖动 108 this.panOption.setDirection(PanDirection.All); 109 this.panOption.setFingers(2); 110 }) 111 } 112 } 113} 114``` 115 116示意图： 117 118向左拖动： 119 120 121 122点击按钮修改PanGesture触发条件，双指向左下方拖动： 123 124 
