微信小程序中列表上拉加载的实现方法（附代码）

本篇文章给大家带来的内容是关于微信小程序中列表上拉加载的实现代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

某个页面，有多个列表，如100行，这时需要实现分页功能，手机端的分页一般都是滑到底部时上拉刷新。

使用scroll-view实现，其bindscrolltolower方法：滚动到底部/右边触发。当触发时发送请求获取新的数据，我写的时候获取的数据很快，我还给它加了个定时器啊哈哈哈，因为我想让showLoading加载弹窗转一转，让用户知道上拉刷新数据。因为没加的时候showLoading一闪而过，感觉体验效果不好。

最后scroll-view使用竖向滚动时，需要给一个固定高度（height:93%），再给page设置高度（height:100%），否则bindscrolltolower触发不了

 scroll-view wx:if= {{isShowList}} >
来一段逻辑的代码
 //上拉加载分页
 getMore(e){
 var that = this;
 var user = wx.getStorageSync( #39;bizUser #39;);
 wx.showLoading({
 title: #39;正在加载中 #39;,
 setTimeout(function(){
 var pageindex = that.data.curPage;
 var student = that.data.student;
 if (pageindex =1){
 ++pageindex;
 wx.request({
 url: app.url + #39; #39;,
 data: {
 schoolId: user.schoolId,
 pageSize: 10,
 curPage:pageindex
 method: #39;GET #39;,
 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 = #39;一次性 #39;;
 } else if (res.data.data[i].sign_type == 1) {
 res.data.data[i].sign_type = #39;计时付 #39;;
 } else if (res.data.data[i].sign_type == 3) {
 res.data.data[i].sign_type = #39;计时付 #39;;
 } else if (res.data.data[i].sign_type == 4) {
 res.data.data[i].sign_type = #39;一次性 #39;;
 } else if (res.data.data[i].sign_type = 5) {
 res.data.data[i].sign_type = #39;一次性 #39;
 //数字变中文
 if (res.data.data[i].learn_stage == 1) {
 res.data.data[i].learn_stage = #39;一 #39;;
 } else if (res.data.data[i].learn_stage == 2) {
 res.data.data[i].learn_stage = #39;二 #39;;
 } else if (res.data.data[i].learn_stage == 3) {
 res.data.data[i].learn_stage = #39;三 #39;
 if (studentLength ==10) {
 for (var j = 0; j studentLength;j++){
 student.push(res.data.data[j]);
 that.setData({
 student: student,
 load: #39;上拉加载更多.. #39;,
 curPage: pageindex
 },
以上就是微信小程序中列表上拉加载的实现方法（附代码）的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！