一分钟教你学会微信小程序的页面刷新
1. 开始刷新
1.在页面的json文件中设置是否开启刷新
2.页面的js中的onPullDownRefresh方法中
// 监听用户的下拉刷新
onPullDownRefresh(){
// 1.重置数组
this.setData({
list1:[],
list2:[],
list3:[]
})
//2.重置页码
// this.QueryParams.pagenum=1
// 3.加载数据
this.getlunbao();
this.getteam();
this.getfanzhi();
this.getAdmin();
},
3.在获取请求的方法中关闭页面加载
wx.stopPullDownRefresh({
})
2.刷新界面的提示
在请求数据库的方法中加入这个提示
getShop(){
//构造的请求数据库的方法
wx.showLoading({
title: '加载中....',
})
//请求数据库
wx.cloud.database().collection('electric')
.get()
.then(res=>{
wx.hideLoading()
//停止数据刷新
wx.stopPullDownRefresh()
this.setData({
list:res.data
})
})
.catch(res=>{
console.log('失败')
})
},
3.结束刷新
wx.stopPullDownRefresh()
在数据库请求到数据后开始隐藏刷新提示，并且结束刷新。
.then(res=>{
wx.hideLoading()
//停止数据刷新
wx.stopPullDownRefresh()
this.setData({
list:res.data
})
})
4.下拉刷新监听
onPullDownRefresh: function () {
this.getShop()//请求数据库的方法
this.getShiwu()
},
5.下拉刷新的样式设计
代码写在这里
代码实现
{
"usingComponents": {
},
"enablePullDownRefresh": true,
"backgroundColor": "#d3d3d3"
}
6.总结
下拉刷新主要是调用API接口，通过wx.startPullDownRefresh()和wx.stopPullDownRefresh()方法来实现下拉刷新的功能。
**
