小程序上拉加载与下拉刷新实战分享

在我们平时的开发过程中，很多情况下都会用到上拉加载，下拉刷新等功能，相信其意义大家都清楚；以下就为大家详细介绍下在小程序中，如何实现这两个功能。

首先，在data中定义所有要用到的参数；

  data: {
    baseUrl: util.baseUrl,    //定义在util文件中的公共地址
    wishData: [],    //定义一个存放数据的数组
    num: 0,    //定义上拉加载时获取数据的起始参数
    hasMoreData: false,    //判断是否还有数据要加载  true没有数据；false还有数据没加载完
  },

接下来，就是最重要的一步了，定义一个获取数据的方法。（这里我用的是原始的wx.request()请求方法，其中url，data都是调用该方法时所传的参数）

getData(url, data) {
    wx.showLoading({
      title: '加载中...',
    })
    var that = this;
    wx.request({
      url: url,
      method: 'POST',
      data: data,
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      success: function (res) {
        if (res.data.length == 0) {
          wx.showToast({
            title: '没有更多数据了',
            icon: 'none',
            duration: 1000
          })
          return
        }

        //这里进入判断，num为0，说明是第一次请求数据
        if (that.data.num == 0) {
          //将获取回来的5条数据设置到data中
          //这个步骤就完成了页面第一屏的数据获取
          that.setData({
            wishData: res.data
          })

          //如果数据不够5条，则将hasMoreData设为true
          if (res.data.length < 5) {
            that.setData({
              hasMoreData: true
            })
          }
        } else {
          //如果不是第一次加载；定义一个存放当次请求数据的数组dataCurrent
          //此次请求到的数据为第二次及以后的数据
          var dataCurrent = res.data;
          //将上一次和当次获取回来的数据合并，设置到data中
          that.data.wishData = that.data.wishData.concat(dataCurrent);
          that.setData({
            wishData: that.data.wishData,
            hasMoreData: false
          })
          //如果当次获取回来的数据小于5条，说明没有更多数据了；将hasMoreData设为true
          if (dataCurrent.length < 5) {
            that.setData({
              hasMoreData: true
            })
          }
        }
        wx.hideLoading()
        wx.stopPullDownRefresh(); //下拉刷新页面反弹
      }
    })
  },

3.在onload函数中调用，获取页面初始化数据

  onLoad: function () {
    this.getData(this.data.baseUrl + '你的接口地址', {
      'start': 0,
      'limit': 5
    })
   }

4.对于上拉加载，我们可以用小程序提供的onReachBottom函数，当页面上滑触底时会触发该方法；

  // 上拉加载
  onReachBottom: function () {
    //hasMoreData为true，说明没有数据了
    if (this.data.hasMoreData) {
      wx.showToast({
        title: '没有更多数据了',
        icon: 'none',
        duration: 1000
      })
      return
    } else {
       //hasMoreData为false，说明数据并未加载完
      //每次上拉请求的参数start加5
      this.data.num = this.data.num + 5;
      //start：接口请求开始位置，limit:当次请求的数据长度
      this.getData(this.data.baseUrl + '你的接口地址', {
        'start': this.data.num,
        'limit': 5
      })
    }
  },

5.相应的，需求如果需要下拉刷新的话，请继续往下看；

//index.json
//必须在index.json中开启下拉刷新
{
  "usingComponents": {},
  "enablePullDownRefresh": true
}

//index.js
//下拉刷新,只加载5条数据
onPullDownRefresh: function () {
  //初始化hasMoreData，num
  //将num设为0,进入getData方法中的判断
  this.setData({
    num: 0,
    hasMoreData: false
  })
  this.getData(this.data.baseUrl + '你的接口地址', { start: 0,limit: 5 });
},

以上就是小程序中常用功能上拉加载和下拉刷新的详细写法；如有疑问，欢迎私信以及留言区讨论。

转载请注明出处，谢谢

最后编辑于：2021.07.28 10:57:10