小程序触底加载和下拉刷新小程序触底加载和下拉刷新

准备：

//js页面 data: { datalist:[],//接收数据 page:1,//作为参数 isBool:true//用于判断是触底加载还是下来刷新 }, //请求已简单封装过 async requestList(){ const url="url" let data=https://www.it610.com/article/{ page:this.data.page,//第几页 limit:10//每次请求的数据量一次10条 } let res=await api.get(url,data)//返回的数据 this.setData({ //isBool如果是true，则为触底加载，会将datalist中的数据和重新请求的数据合并 //isBool如果是false，则为刷新，给datalist重新赋值 datalist:this.data.isBool ? [...this.data.datalist,...res.data] : res.data }) }

开始写触底加载（上拉）:

//js页面 onReachBottom: function () { console.log("上拉,就是触底加载"); this.setData({ page:this.data.page + 1,//每次触发事件，就让page+1 isBottom:true//让isBool为真，代表上拉 }) this.requestList()//最后重新刷新请求 },

下拉（刷新）:
onPullDownRefresh()：需要在app.json的window选项中或页面配置中开启enablePullDownRefresh

app.json: "window": { "backgroundTextStyle": "light",//下拉 loading 的样式,默认为dark, "enablePullDownRefresh":true//启用下拉刷新 },

//js页面： onPullDownRefresh: function () { console.log('监听用户下拉,刷新'); this.setData({ page:this.data.page + 1, isBool:false//用false代表刷新 }) this.requestList()//重新请求 },