小程序模拟ajax请求实现分页功能

一、需求

1. 初次加载显示 loading
2. 下拉时下一页
3. 上拉时上一页
4. 最后一页底部显示“没有更多”
5. 非最后一页底部显示“下拉加载更多”

二、7个请求参数

1. 页面两个下拉框数据 + 两个input数据，四个查询参数
2. 当前页面page参数
3. 页面size参数
4. url参数

三、实现原理

1. 参考 最佳方式实现小程序文章
   目前有两种实现原理，第一种是使用数组对象做数据源。在加载下一页数据时，将下一页的数据拼到当前数组后面。弊端是如果数组中的对象较大时，数组的大小可能超过微信限制。可能会出现 VM429:1 appDataChange 数据传输长度为 1203320 已经超过最大长度 1048576 的异常。

2. 第二种是按文章所说，在数据存储上做一些小的改变，就能实现加载更多的数据。这个方法就是再增加一个数组，用来存放数据。上一个方法是一个数组中存放所有的数据，数据量很容易就会变大。这个方法，将每一页请求过来的数据的引用放到一个新的数组dataArray内。dataArray[0]存放第一页数据，dataArray[1]存储第二页数据。请求新一页，都只需要更新一组数据，这样set的数据就不会超过微信小程序允许的长度。

考虑到实际需求，应该不会有太多数据，直接concat或许更好些。但仔细想想，还需要实现上拉上一页的功能，到时已经concat的数组不方便处理，故选择第二种方式。

四、具体实现逻辑

五、模拟ajax请求

approveList: function(data) {
    return new Promise(function (resolve, reject) {
      // 模拟ajax异步请求2秒后返回数据
      setTimeout(function() {
        resolve({
          total: 23,
          page: 1,
          size: 10,
          result: dummy.lstApprove
        })
      }, 2000)
    })
  }

六、page页面调用request参数完成pageSize大小的查询