实现小程序上/下拉刷新分页功能分为两步即可:
1,在对应组件的json中:
{
"navigationBarTitleText": "告警数据",
"usingComponents": {},
"enablePullDownRefresh": true,
"enableReachBottom": true,
"backgroundTextStyle": "dark"
}
2,在对应组件的js中:
/*
*
* 告警数据
* Author: Henry
*
*/
import config from '../../utils/config';
import HTTP from '../../utils/request';
Page({
data: {
postsList:[],
page:1,//页数
rows:5,//条数
total:0,//总页数
onRefresh: true,
},
onLoad() {
this.getAlarmDataFn();
},
/**
* 获取告警数据
*/
getAlarmDataFn(){
var that = this
var onRefresh = that.data.onRefresh;//false为重新刷新数据,true为分页累加数据
let userId = wx.getStorageSync('userId')
wx.showToast({
title: '数据加载中',
icon: 'loading',
duration: 500
});
HTTP.getAlarmData({
userId:userId,
"page": that.data.page,
"rows": that.data.rows,
}).then((res) => {
var datas = res.data;
if(onRefresh){//false为重新刷新数据,true为分页累加数据
that.setData({
//postsList: res.data,
postsList: that.data.postsList.concat(datas), //累加list,
page:that.data.page,
total: res.count / that.data.rows
})
}else{
that.setData({
postsList: datas, //重新覆盖list,
page:that.data.page,
total: res.count / that.data.rows
})
}
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
var that = this
that.data.page = that.data.page + 1
this.getAlarmDataFn()
},
/**
* 页面下拉触底事件的处理函数
*/
onPullDownRefresh: function () {
var that = this
that.data.page = that.data.page - 1
if(that.data.page<1){
wx.showToast({
title: '无更多数据',
duration: 500
});
}else{
this.getAlarmDataFn()
}
},
})
网友评论