二、页面

就像上面说的那样，数据驱动页面，让我们看看页面中的是什么样子的吧

// 这里是 index.wxml// 这里有些陌生的标签，不要紧，我只是引入了vant weapp而已,
// 你用任何你喜欢的html标签都可以实现
<van-cell-group>
  <block wx:for="{{tasks}}" wx:key="index">
    <navigator url="../todoInfo/todoInfo?id={{item._id}}">      
      <van-cell title="{{item.title}}" />    
    </navigator>  
  </block>
</van-cell-group>
复制代码

// 这里是 index.js

const db = wx.cloud.database()              // 创建一个database实例 
const todos = db.collection("todos")        // 取得数据库中名为 "todos" 的集合

Page({  
  /*页面的初始数据*/  
  data: {    
    tasks: [],    
    skip: 0  
  },
})
复制代码

复制代码 看到这里是不是有了疑问？

tasks是一个[ ] ，而它是空的，是如何变成下图中的样子？

skip 又是什么？

我们取得的todos，为什么还没有出现？它本质上它是一个对象 {} 只是这个花括号里有许多我们塞进去的key 和 value

记住他们，我将接着和你解释。

看 ！ 并没有什么复杂的东西 只是通过 wx:for"{{tasks}}" 
循环遍历tasks并渲染到<van-cell  title="{{item.title}}"/ >而已。
它一条一条的出现在视图中了。
复制代码

如果你对Vue或者小程序有一些了解，那么你将看得懂这段代码在说一件什么事。

三、探究如何实现？

下拉刷新和触底追加内容

// 这里是index.js 
const db = wx.cloud.database()       // 创建一个database实例 
const todos = db.collection("todos") // 取得数据库中名为 "todos" 的集合

Page({
    /*页面的初始数据*/
  data: {                       // 一堆的代码对于任何人来说都感到头痛，所以跟着我注释看吧~
    tasks: [],
    skip: 0
  },
  /****页面相关事件处理函数--监听用户下拉动作****/
  onPullDownRefresh: function () {
    this.getData(res => {       // 这里只是调用了一个方法而已 接着注释往下看它是什么
      wx.stopPullDownRefresh()
      //将skip和tasks重置到初始状态。
      this.data.skip = 0
      this.data.tasks = []
    })
  },

  /****页面上拉触底事件的处理函数****/
  onReachBottom: function () {  // 这里只是调用了一个方法而已 接着注释往下看它是什么
    // 显示加载图标
    console.log("到底了")
    this.getData(res => {})
  },
  
  /***********************getData是我自定义的函数***********************/
  getData: function (callback) {
    if (!callback) {
      callback = res => {}
    }
    wx.showLoading({
      title: '正在努力加载···',
    })
    
  // 这里以下才是重要的部分// 注意todos我们之前已经得到它了
  
  // 下面这串代码告诉我们，取得todos中的数据，每次它都会跳过this.data.skip条，每次都将数据通过
  setData()，把tasks的值修改为 oldData和res.data拼接后的值。成功后将this.data.skip+20。
  // 随后你再看上面的代码 他们都是在触发条件的时候执行了getData而已，再顺带附加了进行了一
  些其他的操作

    todos.skip(this.data.skip).get().then(res => {
      // 用skip方法跳过已加载的部分 第一次跳过 0 条
      let oldData = http://www.wxapp-union.com/this.data.tasks
      this.setData({
        // 将跳过的数据 和 新加载 的拼接成新数据并渲染页面 
        tasks: oldData.concat(res.data)
      }, res => {
        // 每次加20 则上面的skip每次就跳过 前20条
        this.data.skip += 20
        wx.hideLoading({
          success: (res) => {},
        })
        callback()
      })
    })
  },
复制代码

起始渲染20条，是小程序约定的公共值

总结一下

1. 就是通过skip()方法,跳过已加载过的数据，

2. 每次触底都将已加载的数据和接下来要加载的数据进行拼接，并赋值给要渲染的data。

3. 每次刷新再重置data并重新加载页面。