微信小程序下拉刷新、 上拉加载功能实现记录

微信小程序下拉刷新、 上拉加载功能实现

最近开发小程序发现很多页面都是列表, 列表就少不了刷新和加载更多.
所以就有下拉刷新, 上拉加载的需求, 那么我们怎么实现最为便捷呢?

小程序的文档中记载了页面的下拉和上拉事件, 这里提供一下链接小程序文档, 我们可以通过小程序提供的事件来完成我们想要的功能.

• 下拉刷新

onPullDownRefresh() {
    // console.info("页面被下拉");
    this.setData({
      pageNumber: 1,  // 把控制页面的pageNumber置为1, 这样刷新就永远是第一页
    });
    this.Ajax(); // 做一下ajax方法重新获取数据, 
    setTimeout(() => {
      wx.stopPullDownRefresh();
    }, 1000);
  },

• 上拉加载

onReachBottom() {
    console.log(" 拉到底部 ");
    if (this.data.List.length % 10 === 0) {  // 判断是否是10的倍数才决定是否加载下一页
      if (this.data.List.length === this.data.totalRecord) {  // 如果List的长度等于接口返回的总长度, return出去
        return;
      }else { // 否则就是还有下一页数据, 页面加1, 继续加载数据
      	this.setData({
        	pageNumber: this.data.pageNumber + 1  
     	 });
      	this.Ajax();
      }
    }
  },

这里说明一下data中的字段:

data: {
    List: {},  // 页面的列表数据
    pageNumber: 1,  //  页面数
    totalRecord: 0,  // 列表的总长度
  },

然后是ajax()方法

Ajax() {
    let self = this;
    wx.request({
      url: commonapi.noticeList,  
      method: 'GET',
      data: {
        uid: self.data.uid,
        currentPage: self.data.pageNumber,  // 第几页的数据
        status: -1
      },
      dataType: 'json',
      success: function(res) {
        if (res.statusCode === 200) {
          // 判断页面是否第一页, 是的话加载数据, 不是则追加数据
          if (self.data.pageNumber === 1) {
            self.setData({
              List: res.data.Data
            });
            
          } else {
            let count = (self.data.pageNumber - 1) * 10;
            for (let i = 0; i < res.data.Data.ListData.length; i++) {
              self.setData({
              // 逐个写入数据, 这样的话不会导致数据越累越多, setData()负担不起
                ["List[" + (count + i) + "]"]: res.data.Data.ListData[i]
              });
            }
            
          }
          self.setData({
            totalRecord: res.data.Data.TotalRecord,
          });
         
      },
      fail: function(res) {
        
      },
      complete: function(res) {
        
      }
    });

  }

以上就是我感觉比较容易实现的方法, 不喜勿喷