微信小程序向上拉触底加载更多数据

准备工作

一、mock数据

微信小程序为前端程序框架，无法实现API数据，需要自己mock出数据，这里采用mock-server，具体使用方法请参考文档提供的链接，接口实现如下

Mock.mock(/mock/, (ctx) => {
    let mockData = ctx.query
    let start = mockData.start
    let getCount = mockData.count
    let demoLength = demo.length
    if (start >= demoLength) {
        return {
            code: 404,
            data: {
                msg: "没有更多数据"
            }
        }
    } else {
        let total = (demoLength - start) >= getCount ? getCount : demoLength - start
        return {
            code: 200,
            data: {
                total: parseInt(total),
                count: demoLength,
                mockData: demo.slice(start, parseInt(start) + parseInt(getCount))
            }
        }
    }
})

二、Lin-UI

Lin UI 是基于 微信小程序原生语法 实现的组件库。这里使用了Lin UI的三个组件库，WaterFlow、Loading、Loadmore。WaterFlow实现瀑布流的效果，Loading实现加载中的效果，Loadmore实现加载完成底部显示已没有更多数据。具体实现方法，请参考 Lin UI 官方文档

实现

一、定义data数据

count: null,
total: null,
showLoading: false,
showLoadMore: false

count：表示数据可以提供的总数
total：表示已经取出的数据总数
showLoading：表示是否在加载中，根据值是否显示Loading
showLoadMore：表示数据是否已经全部取出，根据值是否显示Loadmore

二、初始化数据

在onLoad生命周期函数中调用API初始化数据

async onLoad(options) {
    const dataHttp = await Http.request({
        start: 0,
        count: 3
    })
    if (dataHttp.code == 200) {
        wx.lin.renderWaterFlow(dataHttp.data.mockData, false, () => {
            console.log('渲染成功')
            this.setData({
                count: dataHttp.data.count,
                total: this.data.total + dataHttp.data.total
            })
        })
    }
},

Http请求中的参数：start表示请求数据开始的位置，0表示从第一个数据开始；count表示此次请求数据的数量，最终返回的数据数量可能会比此值小，比如最后一次请求时已经没有更多数据

三、加载更多数据

onReachBottom会监听到用户上拉触底

if (this.data.showLoading == false) {
  if (this.data.total < this.data.count) {
      this.setData({
          showLoading: true
      })
      setTimeout(async() => {
          const dataHttp = await Http.request({
              start: this.data.total,
              count: 1
          })
  
          wx.lin.renderWaterFlow(dataHttp.data.mockData, false, () => {
              console.log('渲染成功')
              this.setData({
                  count: dataHttp.data.count,
                  total: this.data.total + dataHttp.data.total,
                  showLoading: false
              })
          })
  
      }, 2000)
  } else {
      this.setData({
          showLoadMore: true
      })
  }
}

1、先判断是否正在加载数据,若正在加载数据则不要再处理，防止用户快速的上拉触底操作，造成数据的多次加载
2、判断已经取出的数据是否还小于可以取出的最大数据，防止如果已经没有更多数据，还在进行网络请求，造成不必要的网络资源浪费
3、这里使用setTimeout是用于模拟网络请求的时间延迟，正式使用时不需要此操作

问题

当初始数据加载完成后，Page页面未能将整个页面完全撑开，此时页面无法滚动，微信小程序的onReachBottom不能监听到用户的上拉触底操作，这里提供两种解决方案
1、当页面未能撑开时，设置Page页面的高度超过100%，利用CSS将页面撑开
2、首次加载数据时，多加载一点数据，保证页面可以滚动