值得记录的 （六）- 微信小程序分页 / 上拉触底刷新

会员中心项目的积分详情页在测试过程中发现了只显示了一页的积分，立马想到我没有做分页加载。微信小程序有自带的页面上拉触底事件的处理函数 onReachBottom，可以用来实现懒加载效果。

逻辑

首次进入页面的时候，进行第一次加载，请求。之后的每次触底触发onReachBottom，重新下一页请求。

后端返回数据

由于是使用 wx.request 原生方法拿到的，因此拿到的数据会多一层 data。

JS 代码

使用 wx.request 进行请求，这里是 POST 类型的请求，必须加上 method: 'POST', 不然传参后端会接收不了而导致问题。

var app = getApp();

Page({

  /* 页面的初始数据 */
  data: {
    page: 1,  // 当前页
    code: '',  // 控制 loading-GIF
    list: [],   // 渲染页面
  },

  /* 生命周期函数--监听页面加载 */
  onLoad: function (options) {
    var that = this
    that.setData({
      page: 1,
      list: []
    })
    console.log(app.globalData.Token)
    // 会员积分 渲染

    wx.request({
      url: app.globalData.member_center + '/membership/score-detail?token=' + app.globalData.Token,
      method: 'POST',
      data: { page: 1, count: 15 },  // 向后端的传参
      header: {
        'content-type': 'application/json; charset=UTF-8',
      },
      success(res) {
        let code = res.data.code
        let list = res.data.data
        that.setData({
          code: code,
          list: list,
        })
      }
    })
  },

  /* 页面上拉触底事件的处理函数 */
  onReachBottom: function () {
    var that = this;
    var page = that.data.page
    wx.request({
      url: app.globalData.member_center + '/membership/score-detail?token=' + app.globalData.Token,
      method: 'POST',
      data: { page, count: 10 },
      header: {
        'content-type': 'application/json; charset=UTF-8',
      },
      success(res) {
        if (res.data.data == '' && that.data.list != '') {
          wx.showToast({
            title: '没有更多数据了！',
            icon: 'none',
            duration: 2000
          })
        }
        var arr = that.data.list  // 旧数据
        // 拼接旧数据
        for (var i = 0; i < res.data.data.length; i++) {
          arr.push(res.data.data[i])
        }
        that.setData({
          list: arr
        })
        // 增加页数
        page++
        that.setData({
          page: page
        })
      }
    })
  }
})

效果预览

这样就用微信小程序原生的触底刷新方法实现了请求分页数据。