准备:
//js页面
data: {
datalist:[], //接收数据
page:1, //作为参数
isBool:true //用于判断是触底加载还是下来刷新
},
//请求 已简单封装过
async requestList(){
const url="url"
let data={
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() //重新请求
},
- 可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
- 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
--原创,转载请说明哦!欢迎交流!( •̀ ω •́ )✧
请发表评论