小程序学习笔记-8：上拉加载（数据分页）

上一篇：小程序学习笔记-7（封装API模块）

---

本篇内容
* 上拉加载（数据分页）
* 下拉刷新

上拉加载

思路：后端分页，前端记录页数。当下拉触底时请求新的一页数据，当新的一页返回数据为空时，底部提醒“已全部加载完毕”，否则提示“上拉加载数据”

用到了页面的事件处理函数 onReachBottom()

监听用户上拉触底事件。

• 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
• 在触发距离内滑动期间，本事件只会被触发一次。

//触发触底事件
  onReachBottom () {
    this.loadMore()
  },
//加载更多
  loadMore () {
    if (!this.data.hasMore) return

    wx.showLoading({ title: '拼命加载中...' })
    this.setData({ subtitle: '加载中...' })

    return getListApi(this.data.type, this.data.page++, this.data.size)
      .then(d => {
        if (d.subjects.length) {
          this.setData({ subtitle: d.title, movies: this.data.movies.concat(d.subjects) })
        } else {
          this.setData({ subtitle: d.title, hasMore: false })
        }
        wx.hideLoading()
      })
      .catch(e => {
        this.setData({ subtitle: '获取数据异常' })
        console.error(e)
        wx.hideLoading()
      })
  },