微信小程序~下拉刷新PullDownRefresh

 

一、onPullDownRefresh回調

代碼：

  //  http://itlao5.com
  onPullDownRefresh: function () {
    console.log('onPullDownRefresh')
    this.queryData(id)
  },

 

二、enablePullDownRefresh支持

然而=下拉觸發不了js回調，需要再json中配置支持下拉刷新，即：

"enablePullDownRefresh": true  // 請注意是true，不是"true"字符串，
                               // 部分開發者發現設置了還是無效，
                               // 可能是因為設置的"enablePullDownRefresh": "true"

這個可以在app.json中進行全局配置，使所有頁面都帶有下拉刷新功能；也可以在需要下拉刷新功能的page對應的json中配置。
這下好了，下拉刷新功能完成了。

三、backgroundTextStyle配置

但是，還有一點點不完美的地方，別人的小程序，下拉刷新時，可以看到頂部有三個點閃爍的動畫；而此時小程序頂部一片空白。
原來，還有一個配置，"backgroundTextStyle": ""，支持 dark/light；因為我的背景是白色的，此時，不進行這個配置，因為顏色的緣故，三個點閃爍的動畫就看不到了，因此，白色背景需要進行以下配置：

"backgroundTextStyle": "dark"

四、stopPullDownRefresh停止

此外，微信小程序還提供了停止下拉刷新效果的api，如果發現進入刷新狀態，無法停止，可以使用這個api

  // 小程序提供的api，通知頁面停止下拉刷新效果
  wx.stopPullDownRefresh;

 

 

 

 

 

.