用云开发数据库实现列表触底自动加载功能丨云开发101

2019-09-24 15:48:48 浏览数 (1)

云开发数据库之触底自动加载

在前面的两篇文章中，我们简单的谈了谈云开发数据库与传统数据库的差异，以及云开发数据库中的权限机制，今天我们来分享一些实用的代码，快速帮助大家完成自己的小程序的部分功能。

微信小程序实现触底自动加载

在开发小程序类信息流类型的应用时，我们经常会有一个需求，就是当用户将列表滑动到列表的底部时，自动加载新的数据中，从而实现无限下拉，获得一个更好的体验。

大部分用户在进行传统应用开发时，能够实现类似的功能，但在进行云开发相关的开发时，就迷茫了。在云开发中，同样可以实现类似的功能，这一部分，我们就来看一看这部分的实现细节。

原理说明

在小程序中，触底自动加载的功能是基于页面的 onReachBottom 事件完成的，当触发此生命周期函数时，则说明小程序已经滑动到页面的底部，需要进行数据的加载。

在使用云开发进行数据加载时，我们可以通过在数据库查询语句中加入 skip(20) 来完成跳过所查询数据的前 20 条，从第 21 条开始查询，这样就得出了第二次加载的数据。

这里的 20 是因为云开发数据库 API 单次只能加载 20 条数据，如果你希望其每次只加载10条，可以在代码中加入一个 limit(10) 来实现

因此，如果实现页面的触底自动加载的功能，只需要在页面的 onReachBottom 中使用 skip 进行数据查询，并将该数据附加到原有的数据中，即可完成数据的触底自动加载功能。

实现代码

首先， 我们需要在 Page 实例中定义 onReachBottom 事件，并定义一个 loadData 函数，用于数据加载，后续，我们可以在 onLoad 和 onReachBottom 中调用 loadData 函数。

代码语言：txt复制
Page({
  data:{
    items:[] // 用于放置数据的数组。
  },
  onLoad:function(opt){
	// 页面加载完成后，调用此函数
  },
  onReachBottom:function(){
  // 页面滑动触底后，调用此函数
  },
  loadData:function(){
  // 加载数据所用函数
  }
})

为了确保调用时能够不写重复代码，我们可以在 onLoad 和 onReachBottom 中都调用 loadData 方法，从而减少重复代码量，则我们得到的代码如下。

代码语言：txt复制
Page({
  data: {
    items: [] // 用于放置数据的数组。
  },
  onLoad: function (opt) {
    this.loadData()
  },
  onReachBottom: function () {
    this.loadData
  },
  loadData: function () {
  // 加载数据所用函数
  }
})

这样，我们就完成了 Page 中的基础代码的编写，接下来我们来编写 loadData 中的代码，实现数据的加载。

对于 loadData 函数，我们需要它首先获取到当前已有数据（默认初始化进入页面时，默认数据为空），然后基于已有数据的长度，进行跳过查询，从而查询当前从未查询的数据。

在获取到新的数据以后，使用 Array 的 concat 方法，将新的数据拼接进入到老的数据中，从而获得了一个更大的数组，完成数据的新增。具体代码实例如下：

代码语言：txt复制
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 实例的代码如下

代码语言：txt复制
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 的值，具体的实现代码如下:

代码语言：txt复制
<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相关的技术故事/技术实战经验，请扫码关注【腾讯云云开发】公众号

～

微信截图_20190729152259.png微信截图_20190729152259.png
小程序·云开发

0 人点赞