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

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

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

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

api.png

小程序端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。

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

最后编辑于：2020.05.12 16:04:12