1# Refresh 2 3 The **\<Refresh>** component is a container that provides the pull-to-refresh feature. 4 5> **NOTE** 6> 7> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8 9## Child Components 10 11This component supports only one child component. 12 13## APIs 14 15Refresh\(value: \{ refreshing: boolean, offset?: number | string , friction?: number | string \}\) 16 17**Parameters** 18 19| Name| Value Type| Mandatory| Description| 20| -------- | -------- | -------- | -------- | 21| refreshing | boolean | Yes| Whether the current component is being refreshed.<br>This parameter supports [$$](../../quick-start/arkts-restrictions-and-extensions.md#two-way-binding-of-variables) for two-way binding of variables.| 22| offset | string \| number | No| Distance from the pull-down starting point to the top of the component.<br>Default value: **16**, in vp<br>**NOTE**<br>The value cannot be a percentage or a negative number.| 23| friction | number \| string | No| Coefficient of friction, which indicates the **<Refresh\>** component's sensitivity to the pull-down gesture. The value ranges from 0 to 100.<br>Default value: **62**<br>- **0** indicates that the **\<Refresh>** component is not sensitive to the pull-down gesture.<br>- **100** indicates that the **\<Refresh>** component is highly sensitive to the pull-down gesture.<br>- A larger value indicates a more sensitive response of the **\<Refresh>** component to the pull-down gesture.| 24 25 26 27## Events 28 29 30| Name| Description| 31| -------- | -------- | 32| onStateChange(callback: (state: [RefreshStatus](#refreshstatus)) => void)| Triggered when the refresh status changes.<br>- **state**: refresh status.| 33| onRefreshing(callback: () => void)| Triggered when the component enters the refresh state.| 34 35## RefreshStatus 36 37| Name| Description| 38| -------- | -------- | 39| Inactive | The component is not pulled down. This is the default value.| 40| Drag | The component is being pulled down, but the pulled distance is shorter than the minimum length required to trigger the refresh.| 41| OverDrag | The component is being pulled down, and the pulled distance exceeds the minimum length required to trigger the refresh.| 42| Refresh | The pull-down ends, and the component rebounds to the minimum length required to trigger the refresh and enters the refresh state.| 43| Done | The refresh is complete, and the component returns to the initial state (top).| 44 45 46## Example 47 48```ts 49// xxx.ets 50@Entry 51@Component 52struct RefreshExample { 53 @State isRefreshing: boolean = false 54 @State counter: number = 0 55 56 build() { 57 Column() { 58 Refresh({ refreshing: $$this.isRefreshing, offset: 120, friction: 100 }) { 59 Text('Pull Down and refresh: ' + this.counter) 60 .fontSize(30) 61 .margin(10) 62 } 63 .onStateChange((refreshStatus: RefreshStatus) => { 64 console.info('Refresh onStatueChange state is ' + refreshStatus) 65 }) 66 .onRefreshing(() => { 67 setTimeout(() => { 68 this.counter++ 69 this.isRefreshing = false 70 }, 1000) 71 console.log('onRefreshing test') 72 }) 73 } 74 } 75} 76``` 77 78 79
