1. 实现上拉请求

（1）app.json文件中

"window": {"enablePullDownRefresh": true,
}

（2）当前页面的 .json 文件中

{"enablePullDownRefresh": true,
}

（3）上拉刷新的钩子函数在自动生成的 .js 文件中有，调用数据请求函数

onReachBottom: function() {// 数据请求this.getData()
},

调用数据请求之后，滚动页面无法出现重新加载数据的效果，需要页面高度大于屏幕的高度，也就是要页面内容足够长，能够实现滚动。

2. 实现分页加载

请求实现之后，只是重新加载数据，要对云函数进行修改

return await db.collection(...).where({...}).skip(pagenum).limit(8).get()

其他方法按需要进行补充，主要是要有skip()和limit()，这里的pagenum是请求跳过的条数，8是单次限制条数，可以自行定义

钩子函数中，对pagenum进行定义，使它和页面已经加载的数据的数量一致

onReachBottom: function() {var pagenum = this.data.taskList.length // taskList为数组，数据的数量即为lengththis.getData(pagenum)
},

对getData() 进行修改，增加pagenum参数，并发送到云函数

getData(pagenum=0){...}

3. 数据全部加载完成后阻止上拉刷新

在上拉刷新钩子函数中增加判断条件，放在调用getData()前面

if (pagenum % 8 !== 0) {return
}

4. 容易发送上拉刷新失败问题

（1）原有的钩子函数没有删除，又在前面自行一个，导致被覆盖

（2）页面长度不够，无法触发上拉刷新

微信小程序实现上拉分页加载数据相关推荐

微信小程序实现下拉分页加载更多数据
1.使用scroll-view实现滚动下拉 wxml <scroll-view wx:if="{{plotArr.length > 0}}" scroll-y=&quo ...
微信小程序scroll-view上拉加载更多
微信小程序scroll-view上拉加载更多 1.wxml代码 <scroll-view class="scroll-view-container" scroll-ybind ...
微信小程序中高清图片替换加载策略
微信小程序中高清图片替换加载策略前言一.基本思想二.具体步骤 1.图片大小对比 2.代码流程总结前言随着微信的不断发展,微信小程序凭借着它用户基数大,无下载安装等优点开始逐渐替代传统app ...
php下拉上滑分页,Flutter实现下拉刷新上拉分页加载更多
一.Flutter实现下拉刷新和上拉分页加载更多在Flutter官方sdk中给我们提供了下拉刷新的组件RefreshIndicator.但是没有提供上拉分页加载更多的组件.但是在Flutter Li ...
【Vue学习总结】22.使用Mint UI的infinite-scroll实现上拉分页加载
接上篇<21.Vue-UI框架之Mint UI的使用> 上一篇我们讲解了Vue的UI框架Mint UI的使用,本篇我们来通过Mint UI提供的infinite-scroll组件结合api ...
微信小程序订单页面下拉刷新上拉分页加载
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 效果图: 代码: json代码: {"enablePullDownRefresh" ...
微信小程序实现上拉加载更多数据（分页加载）
前言: 该实例和我其他两篇文章息息相关,不清楚的可以先做功课 Vant Weapp小程序 UI 组件库 https://blog.csdn.net/qq_36303853/article/detail ...
微信小程序如何上拉加载下一页
变量 data: {videos: [],page: 1,pageSize: 8,isLastPage: false,tips: '上拉加载更多' }, videos 数据容器 page 当前页数 p ...
小程序上拉分页加载更多数据功能
在开发过程序中,触底加载更多时,为了防止一直触底加载,这时我们应该加一个开关来控制. 在data中加一个属性isLoading = false 然后在接口发出请求后将开关打开: this.isLoad ...

微信小程序实现上拉分页加载数据

文章目录

1. 实现上拉请求

2. 实现分页加载

3. 数据全部加载完成后阻止上拉刷新

4. 容易发送上拉刷新失败问题

微信小程序实现上拉分页加载数据相关推荐

最新文章

热门文章