harmony 鸿蒙Refresh
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.
When setting a custom component, make sure its height does not exceed 64 vp.
Child Components
This component supports only one child component.
APIs
Refresh(value: { refreshing: boolean, offset?: number|string , friction?: number|string, builder?: Custombuilder})
Parameters
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 | string |number | No | Distance from the pull-down starting point to the top of the component. Default value: 16, in vp 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 | number |string | No | Coefficient of friction, which indicates the 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. |
builder | CustomBuilder10+ | No | Component with the custom refresh style set for the pull-down gesture. |
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 | Description |
---|---|
Inactive | The component is not pulled down. This is the default value. |
Drag | The component is being pulled down, but the pulled distance is shorter than the minimum length required to trigger the refresh. |
OverDrag | The component is being pulled down, and the pulled distance exceeds the minimum length required to trigger the refresh. |
Refresh | The pull-down ends, and the component rebounds to the minimum length required to trigger the refresh and enters the refresh state. |
Done | The refresh is complete, and the component returns to the initial state (top). |
Example
// xxx.ets
@Entry
@Component
struct RefreshExample {
@State isRefreshing: boolean = false
@State counter: number = 0
build() {
Column() {
Refresh({ refreshing: $$this.isRefreshing, offset: 120, friction: 100 }) {
Text('Pull Down and refresh: ' + this.counter)
.fontSize(30)
.margin(10)
}
.onStateChange((refreshStatus: RefreshStatus) => {
console.info('Refresh onStatueChange state is ' + refreshStatus)
})
.onRefreshing(() => {
setTimeout(() => {
this.counter++
this.isRefreshing = false
}, 1000)
console.log('onRefreshing test')
})
}
}
}
你可能感兴趣的鸿蒙文章
harmony 鸿蒙ArkTS-based Declarative Development Paradigm
0
赞
- 所属分类: 后端技术
- 本文标签:
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦