用雲開發資料庫實現列表觸底自動載入功能丨雲開發101
- 2019 年 10 月 6 日
- 筆記
雲開發資料庫之觸底自動載入
在前面的兩篇文章中，我們簡單的談了談雲開發資料庫與傳統資料庫的差異，以及雲開發資料庫中的許可權機制，今天我們來分享一些實用的程式碼，快速幫助大家完成自己的小程式的部分功能。
微信小程式實現觸底自動載入
在開發小程式類資訊流類型的應用時，我們經常會有一個需求，就是當用戶將列表滑動到列表的底部時，自動載入新的數據中，從而實現無限下拉，獲得一個更好的體驗。
大部分用戶在進行傳統應用開發時，能夠實現類似的功能，但在進行雲開發相關的開發時，就迷茫了。在雲開發中，同樣可以實現類似的功能，這一部分，我們就來看一看這部分的實現細節。
原理說明
在小程式中，觸底自動載入的功能是基於頁面的 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 的的值，從而確保我們的數據更新完成以後，不會出現數據錯位的情況。
這樣，我們就完成了觸底自動載入的功能。
參考文獻：
如果你想要了解更多關於雲開發CloudBase相關的技術故事/技術實戰經驗，請掃碼關注【騰訊云云開發】公眾號
～
