小程序上拉加载下拉刷新
在小程序api里设定
onPullDownRefresh 下拉刷新
onReachBottom 上拉触低
想要使用这两个方法还要在json文件里配置
“onReachBottomDistance”:true, 开启上拉
“enablePullDownRefresh”: true,开启下拉
onReachBottomDistance和enablePullDownRefresh 值有两个 false 、true
例如要写一个上拉加载
getLoginHistory : function (size){
let that = this;
wx.request({
url: getApp().globalData.apiUrl ,
header: { 'content-type': 'application/json' },
data: {
openId:getApp().globalData.openId,
page:0,
size:size
},
success: function (res) {
that.setData({
hidden: true,
});
wxperpagelength = res.data.listLength;
that.setData({
wxList: res.data.list
});
console.log(wxperpagelength);
if(wxperpagelength == "0"){
that.setData({
nullHide: false,
resultHidden:true
});
return false;
}
//判断正在加载中是否显示
if (size >= wxperpagelength) {
hideData=true;
that.setData({
hidden: true,
resultHidden:false,
});
return false;
}else{
hideData = false;
that.setData({
resultHidden: true,
hidden: true,
})
}
},
});
},
这是一个获取页面列表的方法
page:0,
size:size
我只要在下拉onPullDownRefresh函数的时候更改一下页面列表个数就能实现 。
onReachBottom: function () {
//判断标示 获得当前用户点击的位置
//移动
if(hideData == false){
size+=4;
console.log(size);
this.getLoginHistory(size);
this.setData({
resultHidden:true,
hidden: false
});
}
else {
this.setData({
resultHidden:false,
hidden: true
});
}
},
这里我设置一页面使4跳数据,只要上拉的时候size 加4条数据就行,就能实现上拉加载。
同理 下拉刷新就只要在下拉时修改size 就行
onPullDownRefresh: function(){
let that = this;
this.setData({
hidden: false,
});
this.getLoginHistory(4);
if(size !== 4){
this.setData({
hidden: false,
});
this.getLoginHistory(4);
}
wx.stopPullDownRefresh();
},