之前写过一个项目主要是tab切换后的列表的一个分页(用的是uniapp),现在用的是微信原生的,没有切换,纯粹的一个分页的功能
页面的初始数据
data:{
list:[ ],
pagesize:10,//每页展示的条数
curpage: 1,//当前页数
count:1//总页数
}
1. 这里是一个方法(getList),调用接口 一般都需要 当前页数和每页展示的条数 所以调接口传参
{
pagesize: this.data.pagesize,
pageNumber:this.data.curpage
}
返回res
var arr1 = this.data.list;//页面此时展示的l列表(数组)
var arr2 = res.list;//后端返回的列表(数组)
arr1 = arr1.concat(arr2);//合并两个数组
this.setData({
list: arr1, //合并后更新list
count:res.pageCount,//后台返回的列表的总页数 如果后台未返回 你可以直接使用列表长度除以每一页的页数然后上摄入(比如 Math.ceil(1.2) // 2 ),因为多出来的两条数据也是一页 比如103条数据每页展示10条,10.3 那就是11页
})
2.在onload种调用此方法 获取初始页面
this.getList();
3. 页面上拉触底事件的处理函数
onReachBottom: function () {
if(this.data.curpage <= this.data.count ){//这里是为了当前页数大于小于总页数,否则会一直刷新
var curpage = this.data.curpage*1+1//上滑一次就加载下一页 在当前页数加一 就是加载下一页
this.setData({
curpage:curpage//更新data重的页数
})
this.getList();//再次调用(获取下一页的数据)
}else{
wx.showToast({
title: '暂无更多数据',//如果当前页数大于总页数则不会刷新并显示提示
icon: "none"
})
}
}
结束啦,如果有问题或者建议,欢迎提出~