微信小程序之下拉刷新

前言

　　為了優化用戶的體驗，小程序一般都會有下拉刷新的功能。這個功能是微信自帶的，不需要重復造輪子。

 

下拉刷新

定義下拉方法

　　在 app.json 中進行全局配置，使所有頁面都帶有下拉刷新功能。

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

window: {
    enablePullDownRefresh: true
}

 

在指定頁面定義下拉刷新的函數

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

onPullDownRefresh: function () {
    //調用刷新時將執行的方法
    this.onRefresh();
}

 

　　如果背景色是白色，在下拉刷新時，頂部三個點閃爍的動畫就不會顯示，可以修改背景色或者修改下拉刷新的配置

"backgroundTextStyle": "dark"

 

停止下拉刷新

　　下拉刷新功能有默認的時長，有時頁面已經刷新加載完畢但是仍然處於下拉狀態，要等幾秒才可以。微信提供了停止下拉刷新的功能，在刷新要執行的函數尾部調用即可

wx.stopPullDownRefresh()

 

自動觸發刷新

　　有時頁面會有自動刷新需求，如果在自動刷新時也想實現下拉效果，可以調用微信的 startPullDownRefresh 方法

wx.startPullDownRefresh(Object object)