1、下拉刷新(json文件中格式要严格,否则编译出错)
全局开启下拉刷新。不推荐
在app.json的window节点中设置:"enablePullDownRefresh": true
局部开启下拉刷新,推荐
在需要下拉刷新的页面json中配置:"enablePullDownRefresh": true
2、配置下拉刷新窗口样式
在对应json文件中(或者全局app.json文件中)配置
"backgroundColor": "#efefef" 背景颜色,仅支持16进制
"backgroundTextStyle": "dark" 背景样式 dark 或者light 两种方式
js文件中的onPullDownRefresh事件可以监听到刷新事件
onPullDownRefresh() {
console.log("下拉刷新了")
},
下拉刷新完成之后,样式没有及时关闭,可在下拉刷新监听事件中加入
onPullDownRefresh() {
console.log("下拉刷新了")
wx.stopPullDownRefresh(); // 加载完成后停止刷新样式
},
3、上拉触底(常用于分页)
对应页面js中函数
onReachBottom() {
console.log("上拉触底了")
},
// 对应json中可以设置滚动条距离底部还有多少像素时进行刷新,默认是50px
"onReachBottomDistance": 150 // 默认单位是px,设置数值后即可
数据拼接:
在获取分页数据的时候返回的data中的数据和原有数据进行拼接
如:
data:{
dataList:[1,2,3,4]
}
getList(){
wx.request({
url:"http://localhost:8080",
method:"GET",
success:({data:res})=>{
this.setData({
dataList:[...this.data.dataList,...res.data]
})
}
})
}
success:({data:res})=>: 将返回的数据data重命名为res
dataList:[...this.data.dataList,...res.data]: 将新数据拼接在原有数据的后边,res.data为新获取到的数据,this.data.dataList为原有数据
上拉触底节流(处理无效请求)
设置data是否加载的的变量作为是否加载数据的阈值,false,表示可以加载,true标识加载中
data:{
loding:fals
},
getList(){
// 更新数据为加载中状态
this.setData({
loding:true
});
// 加载提示
wx.showLoading({“title”:"数据加载中。。。"})
wx.request({
url:"http://localhost:8080",
method:"GET",
success:({data:res})=>{
this.setData({
dataList:[...this.data.dataList,...res.data]
})
},
complete:()=>{
wx.hideLoading(); // 加载提示不会自动关闭,不管当前函数调用成功与否,最后都要关闭加载提示
this.setData({
loding:false // 将参数更新为false,可以再次加载
});
}
})
}
onReachBottom() {
// 如果数据正在加载中,直接返回,不处理请求
if(this.data.loding){
return;
}
this.getList();
},
生命周期