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()}
})