用雲開發數據庫實現列表觸底自動加載功能丨雲開發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相關的技術故事/技術實戰經驗，請掃碼關注【騰訊云云開發】公眾號
～
