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