雲開發資料庫之觸底自動載入

在前面的兩篇文章中，我們簡單的談了談雲開發資料庫與傳統資料庫的差異，以及雲開發資料庫中的許可權機制，今天我們來分享一些實用的程式碼，快速幫助大家完成自己的小程式的部分功能。

微信小程式實現觸底自動載入

在開發小程式類資訊流型別的應用時，我們經常會有一個需求，就是當用戶將列表滑動到列表的底部時，自動載入新的資料中，從而實現無限下拉，獲得一個更好的體驗。

大部分使用者在進行傳統應用開發時，能夠實現類似的功能，但在進行雲開發相關的開發時，就迷茫了。在雲開發中，同樣可以實現類似的功能，這一部分，我們就來看一看這部分的實現細節。

原理說明

在小程式中，觸底自動載入的功能是基於頁面的 onReachBottom

事件完成的，當觸發此生命週期函式時，則說明小程式已經滑動到頁面的底部，需要進行資料的載入。

在使用雲開發進行資料載入時，我們可以通過在資料庫查詢語句中加入 skip(20) 來完成跳過所查詢資料的前 20 條，從第 21 條開始查詢，這樣就得出了第二次載入的資料。

這裡的 20 是因為雲開發資料庫 API 單次只能載入 20 條資料，如果你希望其每次只加載10條，可以在程式碼中加入一個 limit(10) 來實現

因此，如果實現頁面的觸底自動載入的功能，只需要在頁面的 onReachBottom 中使用 skip 進行資料查詢，並將該資料附加到原有的資料中，即可完成資料的觸底自動載入功能。

實現程式碼

首先， 我們需要在 Page 例項中定義 onReachBottom 事件，並定義一個 loadData 函式，用於資料載入，後續，我們可以在 onLoad 和 onReachBottom 中呼叫 loadData 函式。

Page({
  data:{
    items:[] // 用於放置資料的陣列。
  },
  onLoad:function(opt){
    // 頁面載入完成後，呼叫此函式
  },
  onReachBottom:function(){
  // 頁面滑動觸底後，呼叫此函式
  },
  loadData:function(){
  // 載入資料所用函式
  }
})

為了確保呼叫時能夠不寫重複程式碼，我們可以在 onLoad 和 onReachBottom 中都呼叫 loadData 方法，從而減少重複程式碼量，則我們得到的程式碼如下。

Page({
  data: {
    items: [] // 用於放置資料的陣列。
  },
  onLoad: function (opt) {
    this.loadData()
  },
  onReachBottom: function () {
    this.loadData
  },
  loadData: function () {
  // 載入資料所用函式
  }
})

這樣，我們就完成了 Page 中的基礎程式碼的編寫，接下來我們來編寫 loadData 中的程式碼，實現資料的載入。

對於 loadData 函式，我們需要它首先獲取到當前已有資料（預設初始化進入頁面時，預設資料為空），然後基於已有資料的長度，進行跳過查詢，從而查詢當前從未查詢的資料。

在獲取到新的資料以後，使用 Array 的 concat 方法，將新的資料拼接進入到老的資料中，從而獲得了一個更大的陣列，完成資料的新增。具體程式碼例項如下：

loadData: function () {
    let old_data = this.data.items;
    const db = wx.cloud.database();
    db.collection('items').where({
      done: false,
    }).skip(old_data.length).get().then(res => {
      this.setData({
        items:old_data.concat(res.data.data)
      })
    })
  }

最終，我們得到的 Page 例項的程式碼如下

Page({
  data: {
    items: []
  },
  onLoad: function (opt) {
    this.loadData()
  },
  onReachBottom: function () {
    this.loadData
  },
  loadData: function () {
    let old_data = this.data.items;
    const db = wx.cloud.database();
    db.collection('items').where({
      done: false,
    }).skip(this.data.items.length).get().then(res => {
      this.setData({
        items:old_data.concat(res.data.data)
      })
    })
  }
})

在完成了 Page 例項的程式碼以後，我們需要調整頁面結構的程式碼，從而確保我們的資料在進行迴圈時，不會因為新增資料導致資料錯位。這需要我們使用一個唯一的 Key 作為 wx:key 的值，具體的實現程式碼如下:

<view wx:for="{{items}}" wx:key="_id"> {{item}} </view>

這段程式碼實現了使用雲開發所自帶的 ObjectId 作為 wx:key 的的值，從而確保我們的資料更新完成以後，不會出現資料錯位的情況。

這樣，我們就完成了觸底自動載入的功能。

參考文獻：

• 小程式 Page 構造器說明：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

---

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

相關推薦