小编给大家分享一下微信小程序中如何实现列表上拉加载,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
某个页面,有多个列表,如100行,这时需要实现分页功能,手机端的分页一般都是滑到底部时上拉刷新。
使用scroll-view实现,其bindscrolltolower方法:滚动到底部/右边触发。当触发时发送请求获取新的数据,我写的时候获取的数据很快,我还给它加了个定时器啊哈哈哈,因为我想让showLoading加载弹窗转一转,让用户知道上拉刷新数据。因为没加的时候showLoading一闪而过,感觉体验效果不好。
最后scroll-view使用竖向滚动时,需要给<scroll-view/>一个固定高度(height:93%),再给page设置高度(height:100%),否则bindscrolltolower触发不了
<scroll-view wx:if="{{isShowList}}" class='scrollHeight' scroll-y="true" bindscrolltolower="getMore" lower-threshold='3'>
</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)
},
看完了这篇文章,相信你对“微信小程序中如何实现列表上拉加载”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。