小编给大家分享一下微信小程序中如何实现列表上拉加载，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
网站建设哪家好，找
创新互联建站！专注于网页设计、网站建设、微信开发、
成都小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了
茅箭免费建站欢迎大家使用！
某个页面，有多个列表，如100行，这时需要实现分页功能，手机端的分页一般都是滑到底部时上拉刷新。
使用scroll-view实现，其bindscrolltolower方法：滚动到底部/右边触发。当触发时发送请求获取新的数据，我写的时候获取的数据很快，我还给它加了个定时器啊哈哈哈，因为我想让showLoading加载弹窗转一转，让用户知道上拉刷新数据。因为没加的时候showLoading一闪而过，感觉体验效果不好。
最后scroll-view使用竖向滚动时，需要给一个固定高度（height:93%），再给page设置高度（height:100%），否则bindscrolltolower触发不了
来一段逻辑的代码
//上拉加载分页
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://cdxtjz.cn/article/dehsoi.html
