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-two-way-sync.md) 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## Attributes 26 27The [universal attributes](ts-universal-attributes-size.md) are supported. 28 29## Events 30 31In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 32 33 34| Name | Description | 35| ---------------------------------------- | -------------------------------------- | 36| onStateChange(callback: (state: [RefreshStatus](#refreshstatus)) => void)| Triggered when the refresh status changes.<br>- **state**: refresh status.| 37| onRefreshing(callback: () => void) | Triggered when the component enters the refresh state. | 38 39## RefreshStatus 40 41| Name | Description | 42| -------- | -------------------- | 43| Inactive | The component is not pulled down. This is the default value. | 44| Drag | The component is being pulled down, but the pulled distance is shorter than the minimum length required to trigger the refresh. | 45| OverDrag | The component is being pulled down, and the pulled distance exceeds the minimum length required to trigger the refresh. | 46| Refresh | The pull-down ends, and the component rebounds to the minimum length required to trigger the refresh and enters the refresh state.| 47| Done | The refresh is complete, and the component returns to the initial state (top). | 48 49 50## Example 51 52```ts 53// xxx.ets 54@Entry 55@Component 56struct RefreshExample { 57 @State isRefreshing: boolean = false 58 @State counter: number = 0 59 60 build() { 61 Column() { 62 Refresh({ refreshing: $$this.isRefreshing, offset: 120, friction: 100 }) { 63 Text('Pull Down and refresh: ' + this.counter) 64 .fontSize(30) 65 .margin(10) 66 } 67 .onStateChange((refreshStatus: RefreshStatus) => { 68 console.info('Refresh onStatueChange state is ' + refreshStatus) 69 }) 70 .onRefreshing(() => { 71 setTimeout(() => { 72 this.counter++ 73 this.isRefreshing = false 74 }, 1000) 75 console.log('onRefreshing test') 76 }) 77 } 78 } 79} 80``` 81 82 83
