微信小程序列表数据上拉加载,下拉刷新

1.上拉加载数据，数据 = 下一页数据 + 前面的数据（[...this.data.list, ...data.records）

2.当用户上拉加载过快时，会不停的调用接口，需要节流阀isLoading

3.上拉加载到最后一页的判断，isFinish

// pages/list.js
import { reqList } from "../../api/list"

Page({

  data:{
    list:[],
    total:0,
    isFinish:false, // 判断数据是否加载完成
    isLoading:false, //判断数据是否发送中
    requestData:{ // 接口请求参数，根据自己接口调整
      page:1,
      limit:10
    }
  },
  
  // 获取列表
  async getList(){
    // 在请求发送之前。需要将isLoading设置true, 发送中
    this.data.isLoading = true
    // 发送请求获取列表数据, 接口根据需要改动
    const { data } = await reqList(this.data.requestData)
    this.setData({
      list:[...this.data.list, ...data.records],
      total:data.total
    })
    // 请求结束以后，需要将isLoading改为false
    this.data.isLoading = false
  },

// 上拉加载
  onReachBottom(){
    const { list, total, isLoading} = this.data
    if(isLoading) return
    // 数据加载完毕，页码不在新增
    if(list.length === total){
      this.setData({
        isFinish:true
      })
      return
    }
    const {page} = this.data.requestData
    // 页码+1
    this.setData({
      requestData:{...this.data.requestData, page:page+1}
    })
    this.getList()
  },

  //下拉刷新
  onPullDownRefresh(){
    this.setData({
      list:[],
      total:0,
      isFinish:false,
      requestData:{...this.data.requestData, page:1}
    })
    this.getList()
    wx.stopPullDownRefresh() //关闭下拉刷新
  },

  onLoad(options){
    Object.assign(this.data.requestData, options)
    this.getList()
  }
})