小程序下拉刷新,上拉分页代码样例:
data:{
loading: true,
//用于数组的追加和暂存
allList:[],
//用于渲染页面的数组
tempList: [],
//每页显示的行数:
pagelimit: 10,
//页码(从1开始):
pagenum: 1,
//用于标识是否还有更多的状态
state: 1,
}
onShow: function () {
// TODO 加载数据
this.data.pagenum=1
this.loadOrder();
},
// 加载订单
loadOrder:function(){
var params = {
pageNum: this.data.pagenum,
pageLimit: this.data.pagelimit
}
// 异步请求
orderModel.orderList(params).then(res => {
this.setData({loading: false});
//结果数据
var resList = res.list
var restLength=res.list.length
if (restLength < 1) {
this.setData({ tempList: [], state: 0 });
}else {
var tempState = 1;
//如果有数据,但小于每次期望加载的数据量(pagelimit),将state设为0,表示后面已没有数据可加载
if (restLength < this.data.pagelimit){
var tempState = 0;
}
//循环将结果集追加到数组后面
if(this.data.pagenum==1){
this.data.allList = []
}
for (var i = 0; i < restLength; i++) {
this.data.allList.push(resList[i]);
}
this.setData({
tempList: this.data.allList,
state: tempState
});
}
}, () => {
this.setData({loading: false});
});
// setTimeout(()=>{
// this.setData({loading:false});
// }, 1000)
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
wx.showNavigationBarLoading() //在标题栏中显示加载
// TODO加载数据
this.data.pagenum=1
this.loadOrder()
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
// console.log('上拉触底。。');
if(this.data.state>0) {
this.data.pagenum = this.data.pagenum + 1
this.loadOrder()
}
},
···