刷新動(dòng)效的容器組件

2024-01-22 17:55 更新

可以進(jìn)行頁(yè)面下拉操作并顯示刷新動(dòng)效的容器組件。

說(shuō)明

該組件從API Version 8開(kāi)始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

子組件

支持單個(gè)子組件。

接口

Refresh(value: { refreshing: boolean, offset?: number | string , friction?: number | string })

參數(shù):

參數(shù)

參數(shù)名

必填

參數(shù)描述

refreshing

boolean

當(dāng)前組件是否正在刷新。

該參數(shù)支持$$雙向綁定變量。

offset

string | number

下拉起點(diǎn)距離組件頂部的距離。

默認(rèn)值:16

單位:vp

取值范圍:[0vp,64vp],大于64vp按照64vp處理。

說(shuō)明

不支持百分比,不支持負(fù)數(shù)。

friction

number | string

下拉摩擦系數(shù),取值范圍為0到100。

默認(rèn)值:62

- 0表示下拉刷新容器不跟隨手勢(shì)下拉而下拉。

- 100表示下拉刷新容器緊緊跟隨手勢(shì)下拉而下拉。

- 數(shù)值越大,下拉刷新容器跟隨手勢(shì)下拉的反應(yīng)越靈敏。

屬性

支持通用屬性。

事件

除支持通用事件外,還支持以下事件:

名稱

描述

onStateChange(callback: (state: RefreshStatus) => void)

當(dāng)前刷新?tīng)顟B(tài)變更時(shí),觸發(fā)回調(diào)。

- state:刷新?tīng)顟B(tài)。

onRefreshing(callback: () => void)

進(jìn)入刷新?tīng)顟B(tài)時(shí)觸發(fā)回調(diào)。

RefreshStatus枚舉說(shuō)明

名稱

描述

Inactive

默認(rèn)為下拉狀態(tài)。

Drag

下拉中,下拉距離小于刷新距離。

OverDrag

下拉中,下拉距離超過(guò)刷新距離。

Refresh

下拉結(jié)束,回彈至刷新距離,進(jìn)入刷新?tīng)顟B(tài)。

Done

刷新結(jié)束,返回初始狀態(tài)(頂部)。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct RefreshExample {
  5. @State isRefreshing: boolean = false
  6. @State counter: number = 0
  7. build() {
  8. Column() {
  9. Refresh({ refreshing: $$this.isRefreshing, offset: 120, friction: 100 }) {
  10. Text('Pull Down and refresh: ' + this.counter)
  11. .fontSize(30)
  12. .margin(10)
  13. }
  14. .onStateChange((refreshStatus: RefreshStatus) => {
  15. console.info('Refresh onStatueChange state is ' + refreshStatus)
  16. })
  17. .onRefreshing(() => {
  18. setTimeout(() => {
  19. this.counter++
  20. this.isRefreshing = false
  21. }, 1000)
  22. console.log('onRefreshing test')
  23. })
  24. }
  25. }
  26. }

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)