云开发数据库无限加载妙招：列表触底自动加载，从此告别手动加载的麻烦！

2023-11-29 21:48:45

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

在开发小程序类信息流类型的应用时，我们经常会有一个需求，就是当用户将列表滑动到列表的底部时，自动加载新的数据。这对于用户来说是一个非常友好的体验，可以让他们连续浏览内容，而不用手动加载新的数据。

使用云开发数据库实现列表触底自动加载功能非常简单，只需要几行代码即可实现。

在小程序中，使用云开发数据库的collection方法获取要查询的集合。
使用limit方法指定要查询的数据条数。
使用skip方法指定要跳过的数据条数。
使用orderBy方法指定要按哪个字段排序。
使用get()方法执行查询。

const db = wx.cloud.database()
const collection = db.collection('todos')

collection.limit(20).skip(0).orderBy('created_at', 'desc').get().then(res => {
  // res.data 包含了limit条记录的数据
  console.log(res.data)
})

当用户将列表滑动到列表的底部时，小程序会自动触发一个事件，我们可以在这个事件中使用上面介绍的方法来查询新的数据。

Page({
  data: {
    todos: [],
    skip: 0,
    limit: 20
  },
  onLoad: function () {
    this.getTodos()
  },
  onReachBottom: function () {
    this.getTodos()
  },
  getTodos: function () {
    const db = wx.cloud.database()
    const collection = db.collection('todos')

    collection.limit(this.data.limit).skip(this.data.skip).orderBy('created_at', 'desc').get().then(res => {
      this.setData({
        todos: this.data.todos.concat(res.data),
        skip: this.data.skip + this.data.limit
      })
    })
  }
})