藉助雲開發資料庫實現小程式列表上拉刷新功能丨雲開發101

2019 年 10 月 8 日
筆記

上一期101專欄中，我們介紹了如何藉助雲開發資料庫實現小程式的列表觸底自動載入功能，相對應的，小程式列表上拉刷新又該如何實現呢？本期專欄就來為大家解答。

原理說明

在小程式中，如果我們希望實現上拉刷新的功能，則需要我們監聽小程式頁面的 onPullDownRefresh 事件，我們可以在這個方法中實現數據的載入和替換，從而實現數據的刷新和頁面的更新。

實現程式碼

正常情況下的上拉刷新
首先，我們先來看一看一般情況下的上拉刷新功能的實現。這裡的「一般情況」是指你沒有使用 scroll-view 組件的場景，或者使用的是橫向的 scroll-view 的場景，列表是直接構建在頁面內部的，而不是構建在 scroll-view 內部的。

在這種情況下，我們如果希望在頁面上實現上拉刷新，需要在 app.json 中的 window 選項中，或者是頁面的配置中加入 enablePullDownRefresh，並將其配置為 true。

// app.json  {     ...     "window":{         "enablePullDownRefresh":true      }      ...  }  // page.json  {     "enablePullDownRefresh":true  }

配置好以後，我們就可以開始配置了。進入到我們需要實現下拉刷新的頁面，在這個頁面中，我們需要在 Page 的構造函數中添加 onPullDownRefresh 函數的監聽。

Page({    onPullDownRefresh:function(){        // 這裡我們需要進行頁面的載入。      }  })

我們需要在 onPullDownRefresh 函數中，加入我們查詢數據的程式碼，從而實現數據的更新和替換，大體上寫好的程式碼如下：

Page({    onPullDownRefresh:function(){        let db = wx.cloud.database();      // 查詢數據      db.collection('records').get().then(res => {        // 更新數據        this.setData({                  data: res.data        },()=>{                  wx.stopPullDownRefresh();  // 數據同步完成後，停止掉上拉刷新的動畫效果。        })      }).catch(err => {        console.error(err)      })    }  })

在上面這段程式碼中，我們在 onPullDownRefresh 方法中加入了雲開發的資料庫查詢方法，並在資料庫查詢方法的成功回調中加入了 setData 的方法來更新數據，從而確保我們的小程式的頁面數據可以完成更新。

在 setData 方法的回調中，我加入了對 wx.stopPullDownRefresh 的調用，這個 API 可以停止掉小程式的 PullDownRefresh 的動效，從而避免掉數據更新完成了，但是頁面還處在下拉載入的狀態。

這樣，我們就足以處理絕大多數場景下的上拉刷新的情況了。

特殊情況下的上拉刷新

除了直接在頁面上使用上拉刷新的 API 以外，還會有另外一種場景，就是我們會將頁面頂部固定，下方的部分滾動，比如騰訊影片的影片播放頁面。這個頁面是在上方放置一個 Video Player，下方放置一個 scroll-view 來完成滑動，從而實現頂部的 Video Player 固定的效果。在這種情況下，我們應該如何實現上拉刷新呢？

其實也很簡單，我們只需要利用 scroll-view 組件的 bindscrolltoupper 事件來完成上拉刷新的功能。

在具體實現的時候，我們需要在 scroll-view 組件中加入對應的配置。

<scroll-view upper-threshold="50" bindscrolltoupper="onTopper">  <!--- 具體的內容 -->  </scroll-view>

然後，在對應的頁面中，加入具體的事件觸發，參考程式碼如下：

Page({       onTopper:function(){            wx.startPullDownRefresh();            let db = wx.cloud.database();             db.collection('records').get().then(res => {        // 更新數據        this.setData({                  data: res.data        },()=>{                  wx.stopPullDownRefresh(); // 數據同步完成後，停止掉上拉刷新的動畫效果。        })      }).catch(err => {        console.error(err)      })    }  })

這樣，我們就可以實現在 ScrollView 內部實現了一個上拉觸底的效果。

在這段程式碼中，因為我們沒有直接觸發頁面的上拉效果，所以這裡我們使用 wx.startPullDownRefresh 來觸發頁面的上拉效果，然後再使用雲開發的 API 來完成數據的載入，載入完成後，調用 wx.stopPullDownRefresh 方法，停掉上拉刷新的動畫效果。

這樣，即使我們沒有直接觸發頁面的事件，但可以達到類似的頁面效果。

總結

上拉刷新是一個我們很常用的功能，在使用時其實非常簡單，你只需要在特定的方法中調用相關的函數，來實現數據的重載，就可以實現上拉刷新的功能。

如果你想要了解更多關於雲開發CloudBase相關的技術故事/技術實戰經驗，請掃碼關注【騰訊云云開發】公眾號～