1 2 3# PanGesture 4 5**PanGesture** is used to trigger a pan gesture when the movement distance of a finger on the screen exceeds the minimum value. 6 7> **NOTE** 8> 9> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 10 11 12## APIs 13 14PanGesture(value?: { fingers?: number; direction?: PanDirection; distance?: number } | [PanGestureOptions](#pangestureoptions)) 15 16**Parameters** 17 18| Name| Type| Mandatory| Description| 19| -------- | -------- | -------- | -------- | 20| fingers | number | No| Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1**<br>Value range: 1 to 10<br>**NOTE**<br>If the value is less than 1 or is not set, the default value is used.| 21| direction | [PanDirection](#pandirection) | No| Pan direction. The enumerated value supports the AND (&) and OR (\|) operations.<br>Default value: **PanDirection.All**| 22| distance | number | No| Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>If a pan gesture and [tab](ts-container-tabs.md) swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.<br>If this parameter is set to a value less than or equal to 0, the default value **5** is used.| 23 24## PanDirection 25 26| Name| Description| 27| -------- | -------- | 28| All | All directions.| 29| Horizontal | Horizontal panning.| 30| Vertical | Vertical panning.| 31| Left | Panning to the left.| 32| Right | Panning to the right.| 33| Up | Panning up.| 34| Down | Panning down.| 35| None | Panning disabled.| 36 37 38## PanGestureOptions 39 40The attributes of the pan gesture recognizer can be dynamically modified using the **PanGestureOptions** API. This avoids modifying attributes through state variables, which will cause the UI to be refreshed. 41 42PanGestureOptions(value?: { fingers?: number; direction?: PanDirection; distance?: number }) 43 44**Parameters** 45 46| Name | Type | Mandatory| Description | 47| --------- | ------------------------------------- | ---- | ------------------------------------------------------------ | 48| fingers | number | No | Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1**| 49| direction | [PanDirection](#pandirection) | No | Pan direction. The enumerated value supports the AND (&) and OR (\|) operations.<br>Default value: **PanDirection.All**| 50| distance | number | No | Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>If a pan gesture and [tab](ts-container-tabs.md) swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.<br>If this parameter is set to a value less than or equal to 0, the default value **5** is used.| 51 52**APIs** 53 54| Name| Description| 55| -------- | -------- | 56| setDirection(value: [PanDirection](#pandirection)) | Sets the direction.| 57| setDistance(value: number) | Sets the distance.| 58| setFingers(value: number) | Sets the number of fingers.| 59 60 61## Events 62 63| Name| Description| 64| -------- | -------- | 65| onActionStart(event: (event?: [GestureEvent](ts-gesture-settings.md#gestureevent)) => void) | Invoked when a pan gesture is recognized.| 66| onActionUpdate(event: (event?: [GestureEvent](ts-gesture-settings.md#gestureevent)) => void) | Invoked when the pan gesture status is updated.<br>If **fingerList** contains multiple fingers, this callback updates the location information of only one finger each time.| 67| onActionEnd(event: (event?: [GestureEvent](ts-gesture-settings.md#gestureevent)) => void) | Invoked when the finger used for a pan gesture is lift.| 68| onActionCancel(event: () => void) | Invoked when a tap cancellation event is received after a pan gesture is recognized.<br>**NOTE**<br>This event is triggered when the window loses focus.| 69 70## Attributes 71 72| Name| Type |Description | 73| ---- | ------ | ---------------------------------------- | 74| tag<sup>11+</sup> | string | Tag for the pan gesture. It is used to distinguish the gesture during custom gesture judgment.| 75## Example 76 77```ts 78// xxx.ets 79@Entry 80@Component 81struct PanGestureExample { 82 @State offsetX: number = 0 83 @State offsetY: number = 0 84 @State positionX: number = 0 85 @State positionY: number = 0 86 private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right }) 87 88 build() { 89 Column() { 90 Column() { 91 Text('PanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY) 92 } 93 .height(200) 94 .width(300) 95 .padding(20) 96 .border({ width: 3 }) 97 .margin(50) 98 .translate({ x: this.offsetX, y: this.offsetY, z: 0}) // Move the component with its upper left corner as the coordinate origin. 99 // Pan left or right to trigger the gesture event. 100 .gesture( 101 PanGesture(this.panOption) 102 .onActionStart((event?: GestureEvent) => { 103 console.info('Pan start') 104 }) 105 .onActionUpdate((event?: GestureEvent) => { 106 if (event) { 107 this.offsetX = this.positionX + event.offsetX 108 this.offsetY = this.positionY + event.offsetY 109 } 110 }) 111 .onActionEnd(() => { 112 this.positionX = this.offsetX 113 this.positionY = this.offsetY 114 console.info('Pan end') 115 }) 116 ) 117 118 Button ('Set PanGesture Trigger Condition') 119 .onClick(() => { 120 // Set the pan gesture to be triggered by two fingers moving in any direction. 121 this.panOption.setDirection(PanDirection.All) 122 this.panOption.setFingers(2) 123 }) 124 } 125 } 126} 127``` 128 129**Diagrams** 130 131Panning to the left: 132 133 134 135Click **Set PanGesture Trigger Condition** to two fingers moving toward the lower left corner. 136 137  138
