微信小程序下拉刷新与上拉加载

空余时间做小程序练手,遇到了一个需求,需要下拉刷新与上拉加载,一时间没有头绪,然后在掘金里搜索了一下相关的文章,跟着做了还是一头雾水,没有达到我想要的想过,结果产生了新的问题,挣扎了以后,又去看了一下微信小程序的开发文档,于是守得云开见月明了.

在Page()函数注册页面的时候,有一个内置的Object对象,其中有两个方法是用于下拉刷新和上拉加载的,他们是onPullDownRefresh和onReachBottom,这两个方法分别会在用户在该页面顶部下拉一段距离和在页面底部上拉一段距离(默认是50px,可配置)时触发.

注意: 页面的下拉刷新在小程序中默认是禁止的,我们可以在对应的配置文件xxx.json中做一下配置来开启该页面的下拉刷新功能, 示例如下:

{ "enablePullDownRefresh": true }

一定要注意这里的true是布尔值而不是字符串奥,又一次我就因为把一个配置项的true写成了'true',我想当然的以为js的自动转换可以处理,但是小程序并没有做自动的类型转换,导致我好一番折腾.

设置完之后下拉,就可以看到loading的图标,有些同学看不到,则需要在app.json做出以下配置:

接下来,就是根据我们的需求,来定义onPullDownRefresh方法和onReachBottom方法了,代码实例:

 // 上拉触底加载
onReachBottom: function () {  
    if(this.data.hasData){ // hasData用于标识下一页数据的有无, hasData默认为true
      // 显示加载图标
      wx.showLoading({
        title: '玩命加载中',
      });

      let params = this.data.params;
      params.page++;  // 页数+1
      this.setData({
        params: params
      });
      wx.request({
        url: app.globalData.baseUrl + 'normal/list', 
        method: 'GET',
        data: this.data.params,
        header: {
        'content-type': 'application/json',
        'sessionId': app.globalData.sessionId
        },
        success: (res) => {
          let response = res;
          let voteList = this.data.voteList;
          wx.hideLoading();
          if(response.data.code == 200) {
            if(response.data.data.records.length > 0) {
              voteList = voteList.concat(response.data.data.records);
              if(response.data.data.records.length < this.data.params.pageSize) {  // 此时已经没有下一页数据了,将hasData设置为false
                this.setData({
                  voteList: voteList,
                  hasData: false
                });
                wx.showToast({
                  title: '没有更多了',
                  icon: "none"
                });
                return true;
              } else {
                this.setData({  // 仍有下一页数据,则hasData设置为true
                  voteList: voteList,
                  hasData: true
                });
                return true;
              } 
            }
            
          }
        },
        fail: (err) => {
          this.setData({
            voteList: voteList,
            hasData: true
          });
          wx.showToast({
            title: '失败了,请检查网络设置~',
            icon: "none"
          });
          return false;
        }   
     })
    }
  },
  // 下拉刷新事件
  onPullDownRefresh: function () {
    let _params = this.data.params;
    _params.page = 1; // 页数重置为1
    console.log(_params.page)
    this.setData({
      voteList: [],  // 原有数据置空
      params: _params
    });
    wx.request({
      url: app.globalData.baseUrl + 'normal/list', 
      method: 'GET',
      data: this.data.params,
      header: {
      'content-type': 'application/json',
      'sessionId': app.globalData.sessionId
      },
      success: (res) => {
        let response = res;
        let voteList = this.data.voteList;
        if(response.data.code == 200) {
          if(response.data.data.records.length > 0) {
            voteList = voteList.concat(response.data.data.records);
            if(response.data.data.records.length < this.data.params.pageSize) {
              this.setData({
                voteList: voteList,
                hasData: true  // 这里将有无数据值wei
              });
              wx.showToast({
                title: '没有更多了',
                icon: "none"
              });
              return true;
            } else {
              this.setData({
                voteList: voteList,
                hasRefesh: false,
                hasData: true
              });
              return true;
            } 
          }
          
        }
      },
      fail: (err) => {
        this.setData({
          hasRefesh: false,
          hasData: true
        });
        wx.showToast({
          title: '失败了,请检查网络设置~',
          icon: "none"
        });
        return false;
      }
    })
  }

写到这里,上拉刷新和下拉加载的功能也就完成了. 如果这篇文章帮到你了,欢迎你的小心心~~, 如果你有更好的实现下拉刷新和上拉加载的方案,欢迎私信我~~,这是最令人开心的事儿了.