微信小程序中如何实现列表上拉加载-创新互联
小编给大家分享一下微信小程序中如何实现列表上拉加载,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
网站建设哪家好,找创新互联建站!专注于网页设计、网站建设、微信开发、成都小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了茅箭免费建站欢迎大家使用!某个页面,有多个列表,如100行,这时需要实现分页功能,手机端的分页一般都是滑到底部时上拉刷新。
使用scroll-view实现,其bindscrolltolower方法:滚动到底部/右边触发。当触发时发送请求获取新的数据,我写的时候获取的数据很快,我还给它加了个定时器啊哈哈哈,因为我想让showLoading加载弹窗转一转,让用户知道上拉刷新数据。因为没加的时候showLoading一闪而过,感觉体验效果不好。
最后scroll-view使用竖向滚动时,需要给
来一段逻辑的代码
//上拉加载分页 getMore(e){ var that = this; var user = wx.getStorageSync('bizUser'); wx.showLoading({ title: '正在加载中', }); setTimeout(function(){ var pageindex = that.data.curPage; var student = that.data.student; if (pageindex>=1){ ++pageindex; } wx.request({ url: app.url + '', data: { schoolId: user.schoolId, pageSize: 10, curPage:pageindex }, method: 'GET', success:function(res){ if (res.data.data) { var studentLength = (res.data.data instanceof Array) ? res.data.data.length : 0; for (var i = 0; i < studentLength; i++) { //判断计时付或一次性 if (res.data.data[i].sign_type == 2) { res.data.data[i].sign_type = '一次性'; } else if (res.data.data[i].sign_type == 1) { res.data.data[i].sign_type = '计时付'; } else if (res.data.data[i].sign_type == 3) { res.data.data[i].sign_type = '计时付'; } else if (res.data.data[i].sign_type == 4) { res.data.data[i].sign_type = '一次性'; } else if (res.data.data[i].sign_type = 5) { res.data.data[i].sign_type = '一次性' } //数字变中文 if (res.data.data[i].learn_stage == 1) { res.data.data[i].learn_stage = '一'; } else if (res.data.data[i].learn_stage == 2) { res.data.data[i].learn_stage = '二'; } else if (res.data.data[i].learn_stage == 3) { res.data.data[i].learn_stage = '三' } } if (studentLength ==10) { for (var j = 0; j < studentLength;j++){ student.push(res.data.data[j]); } that.setData({ student: student, load: '上拉加载更多..', curPage: pageindex }) } else if (studentLength<10){ for (var j = 0; j < studentLength; j++) { student.push(res.data.data[j]); } that.setData({ student: student, load: '已经没有更多了..', curPage: pageindex }) } } else { that.setData({ load: '已经没有更多了' }) } } }) wx.hideLoading(); },500) },
看完了这篇文章,相信你对“微信小程序中如何实现列表上拉加载”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
当前题目:微信小程序中如何实现列表上拉加载-创新互联
网页地址:http://scyanting.com/article/dehsoi.html