上一期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相關的技術故事/技術實戰經驗，請掃碼關注【騰訊云云開發】公眾號～

相關推薦