小程序实战(八):小程序实现上拉分页
作者:勇康博客网 | 分类:小程序 | 浏览:1287 | 日期: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(); } }, });
以上大概就是上拉分页的代码,说是上拉分页,其实就是滚动条触底触发的方法。但是为了体验的更好,还是需要做一些限制的。
大概就是这么实现的,下一节我们讲【小程序实现下拉刷新】