小程序实战（八）：小程序实现上拉分页
作者:勇康博客网 | 分类:小程序 | 浏览:7029 | 日期:2022年06月14日
上一篇我们讲了【小程序的时间轴组件】，有兴趣的小伙伴可以移步至小程序的时间轴组件查看。这一节我们讲【小程序实现上拉分页】
文章列表需要做分页了
一般APP 或者 手机端一般给我们提供的都是，上拉分页，但是vant小程序版的组件是为我们提供了类似于PC网页那样的页码分页。
但是吧，我就不太想用web网站那样做一串数字页码那样了，这是反人类的设计。使用上拉进行分页。
小程序为我们提供了上拉加载事件：onPullDownRefresh
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},对，就是这个玩意。
这个直接就能触发，不需要其他什么多余的设置，下边我分享一下，我上拉分页的代码。
Index.js
Page({
data: {
// 文章数组
articleList:[],
//每页显示的行数：
pagesize: 20,
//页码（从1开始）
page:1,// 文章页码
//用于标识是否还有更多的状态
state: 1,
//用于数组的追加和暂存
allProject: [],
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
var self = this;
self.getArticleList();
},
/**
* 获取文章列表
*/
getArticleList()
{
var self = this;
// 请求后台接口获取文章列表
wx.request({
// 请求连接
url: 'https://guanchao.site/index/xxxx/xxxxx,
// 请求所需要的的参数
data: {
'page':self.data.page
},
success(result){
var resData = result.data;
var resLength = result.data.length;
//如果搜出来的结果<1 就说明后面已经没数据可加载了，所以将state设为0
if (resLength < 1)
{
self.setData({
state: 0
});
}
else
{
var state1 = 1;
//如果有数据，但小于每次期望加载的数据量（pagesize）,将state设为0，表示后面已没有数据可加载
if (resLength < self.pagesize)
{
var state1 = 0;
}
//循环将结果集追加到数组后面
for (var i = 0; i < resLength; i++) {
self.data.allProject.push(resData[i]);
}
self.setData({
articleList: self.data.allProject,
state: state1
});
}
wx.hideLoading();
}
});
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
var self = this;
var state = self.data.state;
if (state > 0){
// wx.showLoading({
// title: '加载中...',
// });
self.data.page = self.data.page + 1;
self.getArticleList()
// wx.hideLoading();
}
},
});以上大概就是上拉分页的代码，说是上拉分页，其实就是滚动条触底触发的方法。但是为了体验的更好，还是需要做一些限制的。
大概就是这么实现的，下一节我们讲【小程序实现下拉刷新】
