微信小程式之下拉重新整理
阿新 • • 發佈:2022-04-05
前言
為了優化使用者的體驗,小程式一般都會有下拉重新整理的功能。這個功能是微信自帶的,不需要重複造輪子。
下拉重新整理
定義下拉方法
在 app.json 中進行全域性配置,使所有頁面都帶有下拉重新整理功能。
或在需要下拉重新整理功能的 page 對應的 json 中配置。
window: { enablePullDownRefresh: true }
在指定頁面定義下拉重新整理的函式
下拉重新整理其實等於是在下拉操作時執行一個函式,函式的內容可以自定義。微信提供了下拉時執行的函式鉤子 onPullDownRefresh,在 js 中寫入 onPullDownRefresh 就可直接在下拉時被執行。
onPullDownRefresh: function () { //呼叫重新整理時將執行的方法 this.onRefresh(); }
如果背景色是白色,在下拉重新整理時,頂部三個點閃爍的動畫就不會顯示,可以修改背景色或者修改下拉重新整理的配置
"backgroundTextStyle": "dark"
停止下拉重新整理
下拉重新整理功能有預設的時長,有時頁面已經重新整理載入完畢但是仍然處於下拉狀態,要等幾秒才可以。微信提供了停止下拉重新整理的功能,在重新整理要執行的函式尾部呼叫即可
wx.stopPullDownRefresh()
自動觸發重新整理
有時頁面會有自動重新整理需求,如果在自動重新整理時也想實現下拉效果,可以呼叫微信的 startPullDownRefresh 方法
wx.startPullDownRefresh(Object object)