小程序中的上拉加载和下拉刷新

小程序中的上拉加载和下拉刷新

---

小程序中的数据请求，一般是在onLoad中进行的，但在加载时，需要随时调用，便将此封装为一个函数，随时调用

getdata(bool) {
    wx.showLoading({ // loading动画(开始)
      title: '加载中',
    })
    wx.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/search',
      data:{
          pagenum: this.data.pagenum,
          pagesize: this.data.pagesize
      },
      // mathod:'GET',  // get请求可以不写
      success:res => { // 箭头函数的this指向是静态的
        if(bool){
          this.setData({
          // ...展开运算符
            dataList:[...this.data.dataList,...res.data.message.goods]
          })
        }else{
          this.setData({ 
            dataList:res.data.message.goods
          })
        }
        this.setData({
          total: res.data.message.total
        })
        console.log(this.data.dataList);
      },
      complete() {
        wx.hideLoading({
          title:'加载完成'
        })
      }
    })
  },
  onLoad() {
    // 多维数组：[[],[],[],……], 以后做项目数据很多，尽量使用多纬数组
    // 请求的合法域名，必须勾选上
    this.getdata(); // 调用一进入页面就进行数据请求
  },

• 下拉刷新 小程序中定义了onPullDownRefresh来检测，只要进行上拉，就会触发此事件

onPullDownRefresh() {
// 将所有数据重置，并重新请求数据
    this.setData({
      pagenum:1,
      pagesize:10,
    })
    this.getdata();
  },

• 上拉加载 使用onReachBottom事件，进行检测，如果页面的数据长度大于或等于total总数据的长度，不能进行数据渲染，反之，进行数据渲染

onReachBottom() {
    // 如果数据的长度小于total的长度，进行数组拼接
    if(this.data.dataList.length < this.data.total) {
      this.setData({
        pagenum:this.data.pagenum+1,
      })
      this.getdata(true)	// 传入上方，为true就进行数组拼接
    }
  },