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