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

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

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

某个页面,有多个列表,如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)    },
本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » 微信小程序中列表上拉加载的实现方法(附代码)

发表评论

提供最优质的资源集合

立即查看 了解详情