一、json文件开启页面刷新
开启页面刷新。在页面的json文件里配置两处：
- "enablePullDownRefresh": true, //true代表开启页面下拉刷新
- "backgroundColor": "#d3d3d3" //背景色设置为灰色，可以看到下拉刷新的效果
{
"usingComponents": {},
"navigationBarTitleText": "列表下拉刷新",
"enablePullDownRefresh": true,
"backgroundColor": "#d3d3d3"
}
二、在页面里监听用户下拉刷新的动作
在page({ })里面的onPullDownRefresh()方法来监听用户刷新
//监听用户下拉动作
onPullDownRefresh(){
console.log("下拉刷新的监听");
}
三、监听到用户刷新的时候重新请求最新数据
- wx.startPullDownRefresh() //页面加载的时候，开始页面刷新动画
- wx.stopPullDownRefresh() //数据请求成功后，停止页面刷新动画
Page({
//获取列表信息
getList(){
wx.cloud.database().collection("goods")
.get()
.then(res=>{
console.log("请求成功",res);
wx.stopPullDownRefresh() //数据请求成功后，停止页面刷新动画
this.setData({
list:res.data
})
})
.catch(err=>{
console.log("请求失败",err);
})
},
//页面加载的时候，调用getList获取列表信息
onLoad: function (options) {
wx.startPullDownRefresh() //页面加载的时候，开始页面刷新动画
this.getList()
},
//监听用户下拉动作
onPullDownRefresh(){
console.log("下拉刷新的监听");
//下拉刷新的时候，调用getList获取列表信息
this.getList()
}
})
四、效果