首先，我们都直到很多应用的列表页面都支持上拉加载更多，比如电影列表，在uni-app的页面中也能实现这样的想过。
重要概念：

1. onReachBottom()触底钩子函数

和mount()，onload()一样的生命周期函数，实时监听页面的事件，如果页面到了低端的时候则回调这个函数，也是实现触底加载的核心函数。

2. this.$refs.udb

用于获得页面上 uni-clouddb 元素的属性，经 ref=”udb”挂载就可以通过this.$refs.udb.dataList获得当前页面的数据属性dataList，然后通过给这个数据列表添加新的内容，即可实现响应式加载。

3.向数据库请求数据

一旦接收到触底调用，我们就去查数据库，获得新的数据在添加到dataList数据数组中即可。

4.dataList.push()

通过push方法添加的数据是响应式的，我们新请求的返回值也是一个数组，将数组添加进数组的方法我们推荐ES6的语法 a.push(…b) ，…数组代表按顺序读取数组中的数据，而不是数组本身。效果等同于for + push

  1. let a = [1,2,3]
  2. let b = [4,5,6]
  3. a.push(...b)  //ES6语法
  5. //效果等同于
  6. for(let i in b){
  7.   a.push(b[i])
  8. }

注意点：
1.在前端页面的函数中对数据库发起请求的方法和在云函数中相同，不过在返回值这一点需要留心：
通常情况下数据库会返回一个Promise对象，对象中有我们需要的数据，但是Promise对象处理起来比较麻烦，我们只需要Promise中的返回值即可，此时就需要用到 async/await，这也是为什么云函数中一定要用await等待数据库返回的原因。

await

只能在async包装的函数中使用，效果是等待 await 后面表达式的返回值，如果await的是一个Promise对象，则获取Promise对象中的实际返回值而不是Promise对象本身，也就是会将Promise解包。如果不是，则等待表达式最后计算的值。
也就是说await主要是为了获得数据的返回值而使用的一种异步手段，且必须明示async异步才能使用。

数据库的返回值

在云函数中通过await获取的返回值，是直接通过 res.data 就可以获取到数据的，但是在钩子函数中还多了一环，需要用 res.result.data才能获得返回对象中的数据。

  1. data() {
  2.             return {
  3.                 gtn: 10, //设置每一次查询的起始位置
  4.                 ltn: 21, //每一次查询的终止位置
  5.             }
  6.         }
  8. async onReachBottom() {
  9.             const db = uniCloud.database();
  10.             const dbCmd = db.command
  11.             const mdb = db.collection('movie')
  13.       if(this.$refs.udb.hasMore){  //如果还有更多数据
  15.                 let res = await mdb.where({"order":dbCmd.gt(this.gtn).and(dbCmd.lt(this.ltn))}).get()
  16.                 //如果不使用await则查询返回一个Promise对象，不好处理，await的如果是一个Promise，则直接获得Promise中的结果而不是对象本身。
  17.                 let newData = res.result.data //与云函数中略有不同，还需要.result.data
  18.                 //ES6语法，向数组中添加另一个数组中所有的元素
  19.                 this.$refs.udb.dataList.push(...newData) //通过给udb对象中的数据列表dataList添加新的数，就可以实现下拉时加载            
  20.                 this.gtn = this.gtn + 10
  21.                 this.ltn = this.ltn + 10
  22.             }
  23.         }