微信小程序下拉刷新、下拉加载下一页操作逻辑

最新推荐文章于 2025-07-17 21:30:00 发布

原创最新推荐文章于 2025-07-17 21:30:00 发布 · 844 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文介绍了一种基于用户操作的页面加载与刷新机制，包括上滑加载更多数据和下拉刷新功能。通过监听滚动条触底事件实现自动加载下一页数据，并在下拉时触发刷新事件重置页面状态并重新加载数据。

用户上滑页面滚动条触底开始加载下一页数据
1.输入滚动条触底事件
2.判断是否有下一页数据
1）获取到总页数
总页数 = Math.ceil(总条数/ 页容量)
=Math.ceil(total/pagenum)
2）获取当前页码
3）判断一下当前的页面是否大于等于总数
表示没有下一页s数据
3.没有下一页数据弹出提示
4.有数据继续加载
1)当前的页码 ++
2)重新发送请求
3)数据请求回来进行数组拼接而不是全部替换
goodsList:[…this.data.goodsList,…res.goods]

用户下拉刷新事件
1.触发下拉刷新事件在页面json文件中加enablePulDownRefresh:true
js文件中设置下拉刷新事件
2.重置数据数组
3.重置页码设置为1
4.重新发送请求
5.数据请求回来后手动关闭加载效果