本方法是利用页面事件处理函数的 onPullDownRefresh 和 onReachBottom 方法实现小程序的下拉刷新和触底追加内容。

前提条件：

需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。

属性	类型	描述
enablePullDownRefresh	Boolean	是否开启下拉刷新，详见页面相关事件处理函数。

// 这里是index.json                           这里我选择在页面配置中开启，请添加以下语句 
{  "enablePullDownRefresh": true}

了解2个函数：

方法	类型	描述
onPullDownRefresh()	function	页面相关事件处理函数——监听用户下拉动作当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新
onReachBottom()	function	页面上拉触发底事件的处理函数可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance
让我们看看它到底是什么样子，相信你已经知道他们是如何触发的吧

理一下思路：

	要实现这个功能，先要知道在小程序开发中，页面中的内容是由数据驱动的，所以·····

一、数据

你可以自己在Page({ 模拟数据 })
云开发=>数据库=>创建一个新的集合 =>添加记录=>爱添加什么键值对都可以
用接口去取得数据（这里先不具体说明）

这里我选择 2

二、页面

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

// 这里是 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 = this.data.tasks
      this.setData({
        // 将跳过的数据 和 新加载 的拼接成新数据并渲染页面 
        tasks: oldData.concat(res.data)
      }, res => {
        // 每次加20 则上面的skip每次就跳过 前20条
        this.data.skip += 20
        wx.hideLoading({
          success: (res) => {},
        })
        callback()
      })
    })
  },

** 起始渲染20条，是小程序约定的公共值 ** ** 到底追加了12条，因为todos里一共只有32条 **

点击了解 👉 skip()

总结一下

就是通过skip()方法,跳过已加载过的数据，
每次触底都将已加载的数据和接下来要加载的数据进行拼接，并赋值给要渲染的data。
每次刷新再重置data并重新加载页面。

小程序的下拉刷新和触底追加内容

前提条件：

了解2个函数：

理一下思路：

一、数据

二、页面

三、探究如何实现？

点击了解 👉 skip()

总结一下

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

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

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