Refresh
The <Refresh> component is a container that provides the pull-to-refresh feature.
NOTE
This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
Child Components
This component supports only one child component.
Since API version 11, this component's child component moves down with the pull-down gesture.
APIs
Refresh(value: RefreshOptions)
Parameters
Value Type | Type | Mandatory | Description |
---|---|---|---|
value | RefreshOptions | Yes | Parameters of the <Refresh> component. |
RefreshOptions
Name | Value Type | Mandatory | Description |
---|---|---|---|
refreshing | boolean | Yes | Whether the current component is being refreshed. This parameter supports $$ for two-way binding of variables. |
offset(deprecated) | string | number | No | Distance from the pull-down starting point to the top of the component. Default value: 16, in vp This API is deprecated since API version 11. No substitute API is provided. NOTE 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. |
friction(deprecated) | 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. Default value: 62 - 0 indicates that the <Refresh> component is not sensitive to the pull-down gesture. - 100 indicates that the <Refresh> component is highly sensitive to the pull-down gesture. - A larger value indicates a more sensitive response of the <Refresh> component to the pull-down gesture. This API is deprecated since API version 11. No substitute API is provided. |
builder | CustomBuilder10+ | No | Component with a custom refresh style set for the pull-down gesture. NOTE 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. |
Attributes
The universal attributes are supported.
Events
In addition to the universal events, the following events are supported.
Name | Description |
---|---|
onStateChange(callback: (state: RefreshStatus) => void) | Triggered when the refresh status changes. - state: refresh status. |
onRefreshing(callback: () => void) | Triggered when the component enters the refresh state. |
RefreshStatus
Name | Value | Description |
---|---|---|
Inactive | 0 | The component is not pulled down. This is the default value. |
Drag | 1 | The component is being pulled down, but the pulled distance is shorter than the minimum length required to trigger the refresh. |
OverDrag | 2 | The component is being pulled down, and the pulled distance exceeds the minimum length required to trigger the refresh. |
Refresh | 3 | The pull-down ends, and the component rebounds to the minimum length required to trigger the refresh and enters the refresh state. |
Done | 4 | The refresh is complete, and the component returns to the initial state (top). |
Example
Example 1
This example uses the <Refresh> component with its default refresh style.
// xxx.ets
@Entry
@Component
struct RefreshExample {
@State isRefreshing: boolean = false
@State arr: String[] = ['0', '1', '2', '3', '4','5','6','7','8','9','10']
build() {
Column() {
Refresh({ refreshing: $$this.isRefreshing}) {
List() {
ForEach(this.arr, (item: string) => {
ListItem() {
Text('' + item)
.width('100%').height(100).fontSize(16)
.textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
}
}, (item: string) => item)
}
.onScrollIndex((first: number) => {
console.info(first.toString())
})
.width('100%')
.height('100%')
.divider({strokeWidth:1,color:Color.Yellow,startMargin:10,endMargin:10})
.scrollBar(BarState.Off)
}
.onStateChange((refreshStatus: RefreshStatus) => {
console.info('Refresh onStatueChange state is ' + refreshStatus)
})
.onRefreshing(() => {
setTimeout(() => {
this.isRefreshing = false
}, 2000)
console.log('onRefreshing test')
})
.backgroundColor(0x89CFF0)
}
}
}
Example 2
This example uses a custom <Refresh> component with a custom refresh style.
// xxx.ets
@Entry
@Component
struct RefreshExample {
@State isRefreshing: boolean = false
@State arr: String[] = ['0', '1', '2', '3', '4','5','6','7','8','9','10']
@Builder
customRefreshComponent()
{
Stack()
{
Row()
{
LoadingProgress().height(32)
Text("Refreshing..").fontSize(16).margin({left:20})
}
.alignItems(VerticalAlign.Center)
}.width("100%").align(Alignment.Center)
}
build() {
Column() {
Refresh({ refreshing: $$this.isRefreshing,builder:this.customRefreshComponent()}) {
List() {
ForEach(this.arr, (item: string) => {
ListItem() {
Text('' + item)
.width('100%').height(100).fontSize(16)
.textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
}
}, (item: string) => item)
}
.onScrollIndex((first: number) => {
console.info(first.toString())
})
.width('100%')
.height('100%')
.divider({strokeWidth:1,color:Color.Yellow,startMargin:10,endMargin:10})
.scrollBar(BarState.Off)
}
.onStateChange((refreshStatus: RefreshStatus) => {
console.info('Refresh onStatueChange state is ' + refreshStatus)
})
.onRefreshing(() => {
setTimeout(() => {
this.isRefreshing = false
}, 2000)
console.log('onRefreshing test')
})
.backgroundColor(0x89CFF0)
}
}
}