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

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改为falsethis.data.isLoading = false},// 上拉加载onReachBottom(){const { list, total, isLoading} = this.dataif(isLoading) return// 数据加载完毕，页码不在新增if(list.length === total){this.setData({isFinish:true})return}const {page} = this.data.requestData// 页码+1this.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()}
})