1. 程式人生 > 其它 >微信小程式之下拉重新整理

微信小程式之下拉重新整理

前言

  為了優化使用者的體驗,小程式一般都會有下拉重新整理的功能。這個功能是微信自帶的,不需要重複造輪子。

 

下拉重新整理

定義下拉方法

  在 app.json 中進行全域性配置,使所有頁面都帶有下拉重新整理功能。

  或在需要下拉重新整理功能的 page 對應的 json 中配置。

window: {
    enablePullDownRefresh: true
}

 

在指定頁面定義下拉重新整理的函式

  下拉重新整理其實等於是在下拉操作時執行一個函式,函式的內容可以自定義。微信提供了下拉時執行的函式鉤子 onPullDownRefresh,在 js 中寫入 onPullDownRefresh 就可直接在下拉時被執行。

onPullDownRefresh: function () {
    //呼叫重新整理時將執行的方法
    this.onRefresh();
}

 

  如果背景色是白色,在下拉重新整理時,頂部三個點閃爍的動畫就不會顯示,可以修改背景色或者修改下拉重新整理的配置
"backgroundTextStyle": "dark"

 

停止下拉重新整理

  下拉重新整理功能有預設的時長,有時頁面已經重新整理載入完畢但是仍然處於下拉狀態,要等幾秒才可以。微信提供了停止下拉重新整理的功能,在重新整理要執行的函式尾部呼叫即可

wx.stopPullDownRefresh()

 

自動觸發重新整理

  有時頁面會有自動重新整理需求,如果在自動重新整理時也想實現下拉效果,可以呼叫微信的 startPullDownRefresh 方法

wx.startPullDownRefresh(Object object)