微信小程序实现上拉加载（分页加载）

• 本文将简单介绍微信小程序如何实现上拉加载（分页加载）
• 将要使用的api：
  1. wx.request(Object object)

主要思想是：当用户滑倒页面底部，或是距离页面底部x时(x可自定义)，触发页面的触底监听函数，然后调用开发者设计的触底函数，进行相关请求。其中，请求第二页的数据时，会对返回的数组与原有的数组合并，并把新数组发送到data中，渲染到页面。

本文将按此后端接口进行介绍，接口如图：

小程序端js代码如下：

 data: {
      //消息列表数据
      noticeList: [],
      //页码
      pageNum:1,
  },

  //触底响应函数
  onBottom(){
    var that = this;
    (this.data.pageNum)++;
    this.getNoticeList();
  },

  
  getListSuccess(res){
    //成功回调函数，具体需要根据业务需求设计分支结构，此处省略
  	if (this.data.pageNum == 1) {
  		this.setData({
    		noticeList: res.data.data.list,
     	})
    } else {
    	//获取原始列表
        let noticeList = that.data.noticeList;
        //获取新列表
        let arr = res.data.list;
        //新列表数据与原列表数据合并
        let newArr = noticeList.concat(arr);
        this.setData({
            noticeList: newArr,
        })
    }
  },
  //获取列表失败的回调函数
  getListFail(err){
    wx.showToast({
      title: '获取失败，请稍后重试',
      icon:'none',
      duration:2500,
    })
  },

  getNoticeList(){
    //请求的接口地址
    let url = '/notice/getList';
    //当前的页码
    let pageNo = this.data.pageNum;
    //某些业务数据，如
    let id = this.data.id;
    //一页包含几条数据
    let pageSize = 20;
    let data = {
      id: id,
      pageNo: pageNo,
      pageSize: pageSize,
    }
    //调用了一个自己封装了的wx.request函数，无需关注，其参数和wx.request的差不多对应
    //url是请求地址，'post'是请求头，data是请求参数
    //this.getListSuccess和this.getListFail分别是成功和失败的回调函数
    $.ajax(url, 'POST', data, this.getListSuccess, this.getListFail);
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.onBottom();
  },

除此之外，我们还可以在相关页面的json代码中设置：

"onReachBottomDistance":100

页面上拉触底事件触发时距页面底部距离，单位为px。

欢迎大家多多指教，一起交流~