小程序实现下拉刷新和触底加载更多

小程序实现下拉刷新—功能

分为全局开启刷新或者页面开启刷新功能，根据项目需求，以我的这个项目为例，我在页面配的下拉刷新，找到对应的页面的json文件，代码如下:

{
    "usingComponents": {},
    "navigationBarTitleText": "发票列表",
    "enablePullDownRefresh": true,
    "backgroundColor": "#eee",
    "backgroundTextStyle": "dark",
  }

然后在页面定义下拉刷新函数

 //开启下拉刷新
  onPullDownRefresh: function() {
    console.log("下拉");
    this.invoiceDataList.page = 1;
    this.search();//去调用自己之前请求的数据的函数，在这里直接调用就好，无需再写
    console.log("刷新成功");
  },

小程序实现触底加载更多—功能

在json文件里加上如下代码:

{
  "usingComponents": {},
  "navigationBarTitleText": "发票列表",
  "onReachBottomDistance": 50//表示距离底部50px触发函数
}

在data里定义一个触底开关：

 data() {
  return {
    flag: true //触底开关
  };
},

因为是触底去请求数据，新一页的数据要拼接在第一页的后面，如果直接调用下拉刷新的那个函数的话，那么第一页的数据就会被覆盖，所以我选择用数组拼接的方式，用的是concat（百度用法详细介绍），所以我对之前的请求做了一些处理：

 // 处理触底数组合并
  updated() {
    var that = this;
    wx.request({
      url: this.baseUrl + "api/invoices?page=" + this.invoiceDataList.page,
      method: "GET",
      header: {
        Authorization: "Bearer " + wx.getStorageSync("token")
      },
      success(res) {
      //触底主要是判断这里，如果请求回来的数组长度为0，就关闭开关，不去发不必要的请求
      //否则就要把请求的res.data.data数据拼接到之前的数据里
        if (res.data.data.length == 0) {
          that.flag = false;
        } else {
          that.invoiceList = that.invoiceList.concat(res.data.data);
        }
      }
    });
  },

最后调用触底函数：

//  页面上拉触底事件的处理函数 
onReachBottom() {
  if (this.flag) {
  //判断，如果flag有数据，开的，就去请求第二页的数据，调用上面处理过的upload数据整合
    this.invoiceDataList.page += 1;
    this.updated();
  }else{
    return
  }
}

以上纯属自己个人笔记，有很多不足之处，还望谅解，每天都在学习，进步一点点。