uniapp下拉重新整理避坑指南

在js中定義onpulldownrefresh處理函式(和onload等生命週期函式同級), 監聽該頁面使用者下拉重新整理事件.

當處理完資料重新整理後,uni.stoppulldownrefresh可以停止當前頁面的下拉重新整理.

uni.startpulldownrefresh(); 開始下拉重新整理, 呼叫後觸發下拉重新整理動畫, 效果與使用者手動下拉重新整理一致

"pages":[}],

onload:
function
(options)
,1000);
//頁面載入時就進行一次頁面的下拉, 如果不需要可以不寫
uni.
startpulldownrefresh()
;},onpulldownrefresh()
,1000);
}

沒有滾動到頂部觸發下拉, 而是在可視頁面中觸發下拉

官方預設無論page的滾動條在哪個位置, 只要在scroll-view頁面上下拉都會觸發下拉函式, 這樣使用者體驗非常差. 可以使用@scroll滾動時觸發的函式來獲取scroll-view滾動條的位置, 進而來控制refresher-enabled開啟和關閉自定義下拉重新整理. 當scroll-view的滾動條滾動到頂部時, 使refresher-enabled為true, 其他條件為false.

下拉動畫的背景顏色設定/

refresher-background="#f0f0f0"

區域性的頁面滾動

>

class
="scroll"
scroll-y
="true"
:refresher-enabled
='refresherenabled'
@refresherpulling
="onpulling"
@refresherrefresh
="onrefresh"
@refresherrestore
="onrestore"
@refresherabort
="onabort"
:refresher-triggered
="triggered"
@scroll
='roll'
refresher-background
="#f0f0f0"
>
>
view
>
>
view
>
>
view
>
class
="load"
>
:status
="status"
>
uni-load-more
>
view
>
scroll-view
>
view
>

data()

}onload()
,methods:
,        uni.
request(,
success:
(res)
=>
else}}
);},
//	自定義下拉重新整理控制項被下拉
onpulling
(e),
//自定義下拉重新整理被觸發
onrefresh()
,2000)}
,//自定義下拉重新整理被復位
onrestore()
,//自定義下拉重新整理被中止
onabort()
// 獲取滾動距離
roll
(res)
else},
}

/**/

uniapp 下拉重新整理

1 需要在pages.json裡，找到的當前頁面的pages節點，並在 style 選項中開啟enablepulldownrefresh。2 當處理完資料重新整理後，uni.stoppulldownrefresh可以停止當前頁面的下拉重新整理。在js中定義onpulldownrefresh處理函式 ...

uni app 下拉重新整理

官方文件 在 js 中定義 onpulldownrefresh 處理函式 和onload等生命週期函式同級 監聽該頁面使用者下拉重新整理事件。開始下拉重新整理，呼叫後觸發下拉重新整理動畫，效果與使用者手動下拉重新整理一致。object 引數說明 引數名型別 必填說明 success function...

uni app做下拉重新整理

onload option 1000 毫秒 uni.startpulldownrefresh this getbargindata 呼叫這個介面 console.log res success 返回引數說明 這裡表示當進入頁面的時候就開始執行下拉重新整理動畫 onpulldownrefresh th...