微信小程序中如何实现列表上拉加载

  介绍

小编给大家分享一下微信小程序中如何实现列表上拉加载,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

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

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

最后滚动视图使用竖向滚动时,需要给& lt;滚动视图/在一个固定高度(高度:93%),再给页面设置高度(高度:100%),否则bindscrolltolower触发不了

& lt; scroll-view 天气:如果=皗{isShowList}}“,类=& # 39;scrollHeight& # 39;, scroll-y=皌rue", bindscrolltolower=癵etMore",下辨别阈=& # 39;3 & # 39;比;   & lt;/scroll-view>

来一段逻辑的代码

,,//上拉加载分页   getMore才能(e) {   ,,,var  that =,;   ,,,var  user =, wx.getStorageSync (& # 39; bizUser& # 39;);   ,,,wx.showLoading ({   ,,,,,标题:,& # 39;正在加载中& # 39;,   ,,,});   ,,,setTimeout(函数(){   ,,,,,var  pageindex =, that.data.curPage;   ,,,,,var  student =, that.data.student;   ,,,,,if  (pageindex>=1) {   ,,,,,,,+ + pageindex;   ,,,,,}   ,,,,,wx.request ({   ,,,,,,,url:, app.url  +, & # 39; & # 39;   ,,,,,,,数据:,{   ,,,,,,,,,schoolId:, user.schoolId,   ,,,,,,,,,页大小:,,   ,,,,,,,,,curPage: pageindex   ,,,,,,,},   ,,,,,,,方法:,& # 39;得到# 39;   ,,,,,,,成功:函数(res) {   ,,,,,,,,,if  (res.data.data), {   ,,,,,,,,,,,var  studentLength =, (res.data.data  instanceof 数组),?,res.data.data.length :, 0;   ,,,,,,,,,,,for  (var 小姐:=,0;,小姐:& lt;, studentLength;,我+ +),{   ,,,,,,,,,,,,,//判断计时付或一次性   ,,,,,,,,,,,,,if  (res.data.data[我].sign_type ==, 2), {   ,,,,,,,,,,,,,,,res.data.data[我].sign_type =, & # 39;一次性& # 39;;   ,,,,,,,,,,,,,},else  if  (res.data.data[我].sign_type ==, 1), {   ,,,,,,,,,,,,,,,res.data.data[我].sign_type =, & # 39;计时付& # 39;;   ,,,,,,,,,,,,,},else  if  (res.data.data[我].sign_type ==, 3), {   ,,,,,,,,,,,,,,,res.data.data[我].sign_type =, & # 39;计时付& # 39;;   ,,,,,,,,,,,,,},else  if  (res.data.data[我].sign_type ==, 4), {   ,,,,,,,,,,,,,,,res.data.data[我].sign_type =, & # 39;一次性& # 39;;   ,,,,,,,,,,,,,},else  if  (res.data.data[我].sign_type =, 5), {   ,,,,,,,,,,,,,,,res.data.data[我].sign_type =, & # 39;一次性& # 39;   ,,,,,,,,,,,,,}      ,,,,,,,,,,,,,//数字变中文   ,,,,,,,,,,,,,if  (res.data.data[我].learn_stage ==, 1), {   ,,,,,,,,,,,,,,,res.data.data[我].learn_stage =, & # 39;一& # 39;;   ,,,,,,,,,,,,,},else  if  (res.data.data[我].learn_stage ==, 2), {   ,,,,,,,,,,,,,,,res.data.data[我].learn_stage =, & # 39;二& # 39;;   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null

微信小程序中如何实现列表上拉加载