W3Cschool
恭喜您成為首批注冊(cè)用戶(hù)
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
可以進(jìn)行頁(yè)面下拉操作并顯示刷新動(dòng)效的容器組件。
該組件從API Version 8開(kāi)始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。
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)越靈敏。 |
除支持通用事件外,還支持以下事件:
名稱(chē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)。 |
名稱(chēng) | 描述 |
---|---|
Inactive | 默認(rèn)為下拉狀態(tài)。 |
Drag | 下拉中,下拉距離小于刷新距離。 |
OverDrag | 下拉中,下拉距離超過(guò)刷新距離。 |
Refresh | 下拉結(jié)束,回彈至刷新距離,進(jìn)入刷新?tīng)顟B(tài)。 |
Done | 刷新結(jié)束,返回初始狀態(tài)(頂部)。 |
- // 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')
- })
- }
- }
- }
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話(huà):173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: