Refresh
可以進行頁面下拉操作并顯示刷新動效的容器組件。
說明:
開發前請熟悉鴻蒙開發指導文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md
]
該組件從API Version 8開始支持。后續版本如有新增內容,則采用上角標單獨標記該內容的起始版本。當設置自定義組件時,自定義組件的高度限制在64vp之內。
子組件
支持單個子組件。
接口
Refresh(value: { refreshing: boolean, offset?: number | string , friction?: number | string, builder?: Custombuilder})
參數:
參數 | 參數名 | 必填 | 參數描述 |
---|---|---|---|
refreshing | boolean | 是 | 當前組件是否正在刷新。 該參數支持[$$]雙向綁定變量。 |
offset | string | number | 否 |
friction | number | string | 否 |
builder | [CustomBuilder]10+ | 否 | 下拉時,自定義刷新樣式的組件。 |
屬性
支持[通用屬性]。
事件
除支持[通用事件]外,還支持以下事件:
名稱 | 描述 |
---|---|
onStateChange(callback: (state: [RefreshStatus]) => void) | 當前刷新狀態變更時,觸發回調。 - state:刷新狀態。 |
onRefreshing(callback: () => void) | 進入刷新狀態時觸發回調。HarmonyOS與OpenHarmony鴻蒙文檔籽料:mau123789是v直接拿 |
RefreshStatus枚舉說明
名稱 | 描述 |
---|---|
Inactive | 默認未下拉狀態。 |
Drag | 下拉中,下拉距離小于刷新距離。 |
OverDrag | 下拉中,下拉距離超過刷新距離。 |
Refresh | 下拉結束,回彈至刷新距離,進入刷新狀態。 |
Done | 刷新結束,返回初始狀態(頂部)。 |
示例
// 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')
})
}
}
}
審核編輯 黃宇
聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。
舉報投訴
-
組件
+關注
關注
1文章
518瀏覽量
17925 -
鴻蒙
+關注
關注
57文章
2392瀏覽量
43055
發布評論請先 登錄
相關推薦
評論