一、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() } })
四、效果