微信小程序分页加载的代码

什么是微信小程序分页加载

微信小程序分页加载是指在小程序中加载大数据，由于小程序在一次请求中只能返回最多1000条数据，因此需要分多次请求来获取大数据。每次请求数据的最大数量为1000条，一般情况下，每次请求获取500条到800条数据是比较合理的选择。

实现微信小程序分页加载的代码

Step 1： 构造分页参数

在请求服务器数据时，需要向服务器传递分页参数。分页参数一般包括page和limit，其中page表示当前页码，limit表示每页返回数据的最大数量。在小程序中，我们可以使用setData来设置分页参数，然后在发送请求时，将分页参数以query的形式传递到服务器。

//初始化数据
data:{
  page:1,//分页参数-当前页码
  limit:10,//分页参数-每页数据数量
  listData:[]//存放数据的变量
}

在setData中，page从1开始，表示请求第1页数据，limit根据业务需求设置，此处设置为10。

Step 2：发送请求获取数据

发送请求获取数据时，分页参数需要以query的形式传递给服务器，如下所示：

wx.request({
  url: 'https://www.example.com',
  data: {
    page:data.page,//分页参数-当前页码
    limit:data.limit//分页参数-每页数据数量
  },
  success(res) {
    console.log(res.data)
  }
})

注意，上述代码中的url需要修改为实际的请求地址。

Step 3：处理服务器返回的数据

处理服务器返回的数据时，需要对分页参数进行更新，使得下一次请求可以获取到下一页数据。具体操作如下：

wx.request({
  url: 'https://www.example.com',
  data: {
    page:data.page,//分页参数-当前页码
    limit:data.limit//分页参数-每页数据数量
  },
  success(res) {
    if(res.data.code===0){
      //将当前页数据添加到列表数组中
      var listData=data.listData.concat(res.data.data.list)
      //数据总条数
      var total=res.data.data.total
      //计算总页数
      var totalPage=Math.ceil(total/data.limit)
      //更新分页数据和数据列表
      data.totalPage=totalPage
      data.page++
      data.listData=listData
      that.setData({
        listData:listData,
        hasMore: true
      })
    }else{
      that.setData({
        hasMore: false
      })
    }
  }
})

上述代码中，listData是一个数组，用于存放当前页数据，total表示数据总条数，totalPage表示总页数。在处理完数据之后，更新分页数据和数据列表，使用setData将listData更新到页面上，同时根据分页数据和数据总条数判断是否还有更多数据。

Step 4：实现上拉加载更多

实现上拉加载更多，需要在页面的onReachBottom事件中发送请求获取下一页数据，代码如下所示：

onReachBottom:function() {
  if(that.data.page<=that.data.totalPage){
    that.setData({
      hasMore: false
    })
    that.getMoreData()
  }
},
getMoreData:function(){
  wx.showLoading({
    title: '正在加载中...',
  })
  wx.request({
    url: 'https://www.example.com',
    data:{
      page:that.data.page,
      limit:that.data.limit
    },
    success(res){
      if(res.data.code===0){
        //将当前页数据添加到列表数组中
        var listData=that.data.listData.concat(res.data.data.list)
        //数据总条数
        var total=res.data.data.total
        //计算总页数
        var totalPage=Math.ceil(total/that.data.limit)
        //更新分页数据和数据列表
        that.setData({
          totalPage:totalPage,
          page:that.data.page+1,
          listData:listData,
          hasMore:true
        })
      }else{
        that.setData({
          hasMore:false
        })
      }
    },
    complete(){
        wx.hideLoading()
    }
  })
}

在getMoreData方法中，首先显示一个loading提示框，然后发送请求获取下一页数据，如果数据请求成功，则将当前页数据添加到列表数组中，计算总页数并更新分页数据和数据列表，最后隐藏loading提示框。如果请求失败，则将hasMore设置为false，表示没有更多数据了。

Step 5：实现下拉刷新

如果需要实现下拉刷新，可以在页面的onPullDownRefresh事件中发送请求获取第一页数据。示例代码如下：

onPullDownRefresh:function(){
  that.setData({
    page:1,
    listData:[],
    hasMore:true
  })
  that.getData()
}

在onPullDownRefresh事件中，我们重置page为1，清空listData数组，然后调用getData方法获取第一页数据。注意，调用wx.stopPullDownRefresh方法停止下拉刷新的效果。

小结

微信小程序分页加载是小程序中常用的技术之一，可用于处理大数据量的情况。要实现微信小程序分页加载，需要在请求数据时传递分页参数，处理服务器返回的数据并更新分页数据和列表数据，实现上拉加载更多和下拉刷新等功能。