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> There is a height limit of 64 vp on custom components. 10## Child Components 11 12This component supports only one child component. 13 14Since API version 11, this component's child component moves down with the pull-down gesture. 15 16## APIs 17 18Refresh\(value: \{ refreshing: boolean, offset?: number | string , friction?: number | string, builder?: Custombuilder\}\) 19 20**Parameters** 21 22| Name | Value Type | Mandatory | Description | 23| ---------- | ---------------------------------------- | ---- | ---------------------------------------- | 24| refreshing | boolean | Yes | Whether the current component is being refreshed.<br>This parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| 25| 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 range of **offset** is [0vp, 64vp]. If the value is greater than 64 vp, the value 64 vp will be used. The value cannot be a percentage or a negative number.| 26| 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.| 27| builder | [CustomBuilder](ts-types.md#custombuilder8)<sup>10+</sup> | No | Component with a custom refresh style set for the pull-down gesture.<br>**NOTE**<br>In API version 10 and earlier versions, there is a height limit of 64 vp on custom components. This restriction is removed since API version 11.| 28 29## Attributes 30 31The [universal attributes](ts-universal-attributes-size.md) are supported. 32 33## Events 34 35In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 36 37 38| Name | Description | 39| ---------------------------------------- | -------------------------------------- | 40| onStateChange(callback: (state: [RefreshStatus](#refreshstatus)) => void)| Triggered when the refresh status changes.<br>- **state**: refresh status.| 41| onRefreshing(callback: () => void) | Triggered when the component enters the refresh state. | 42 43## RefreshStatus 44 45| Name | Value | Description | 46| -------- | -------- | -------------------- | 47| Inactive | 0 | The component is not pulled down. This is the default value. | 48| Drag | 1 | The component is being pulled down, but the pulled distance is shorter than the minimum length required to trigger the refresh. | 49| OverDrag | 2 | The component is being pulled down, and the pulled distance exceeds the minimum length required to trigger the refresh. | 50| Refresh | 3 | The pull-down ends, and the component rebounds to the minimum length required to trigger the refresh and enters the refresh state.| 51| Done | 4 | The refresh is complete, and the component returns to the initial state (top). | 52 53 54## Example 55 56```ts 57// xxx.ets 58@Entry 59@Component 60struct RefreshExample { 61 @State isRefreshing: boolean = false 62 @State counter: number = 0 63 64 build() { 65 Column() { 66 Refresh({ refreshing: $$this.isRefreshing, offset: 120, friction: 100 }) { 67 Text('Pull Down and refresh: ' + this.counter) 68 .fontSize(30) 69 .margin(10) 70 } 71 .onStateChange((refreshStatus: RefreshStatus) => { 72 console.info('Refresh onStatueChange state is ' + refreshStatus) 73 }) 74 .onRefreshing(() => { 75 setTimeout(() => { 76 this.counter++ 77 this.isRefreshing = false 78 }, 1000) 79 console.log('onRefreshing test') 80 }) 81 } 82 } 83} 84``` 85 86 87
