微信小程序 - 页面触底 onReachBottom() 懒加载自动计算分页、检查是否已经请求完全部数据、自动请求接口合并数据（高效自动判断分页懒加载是否继续请求接口数据，超详细触底请求后端示例教程）

已于 2024-02-02 00:02:44 修改
阅读量2.4k 收藏 4
点赞数 3
分类专栏： + Wechat 文章标签： 微信小程序 onReachBottom 页面上拉触底 数据列表懒加载 uni-app
于 2022-10-07 21:47:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/127185073
版权
+ Wechat 专栏收录该内容
119 篇文章 970 订阅 ¥19.90 ¥99.00
订阅专栏

前言

如果您需要 uni-app 版本，请访问 这篇文章。

在微信小程序中，可以借助页面触底 onReachBottom 钩子函数完成懒加载，但如何完美优雅且无 BUG 完成懒加载，并不是容易事。

网上很多教程都是页面触底后，直接请求接口，

然后对应 page 页码 +1，啥时候大于总条数就停止请求，仅仅这样是远远不健壮的。

本文从 0-1 提供给您最优的解决方案，您只需要换个后端接口就能直接使用，

如下图所示，真实请求后端接口环境，自动分页、自动判断是否到底并与界面关联：

仅写了核心代码与简单样式，方便您观察代码。

在这里插入图片描述

完整源码

了解本专栏 订阅专栏 解锁全文
王佳斌
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
10-17
主要介绍了微信小程序使用wx.request请求服务器json数据并渲染到页面操作,结合实例形式分析了微信小程序使用wx.request发送网络请求及返回结果渲染到wxml界面相关操作技巧,需要的朋友可以参考下
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
10-15
主要介绍了微信小程序实现上拉加载功能,结合实例形式分析了微信小程序加载更多数据、触底加载或点击加载更多数据的相关实现技巧与操作注意事项,需要的朋友可以参考下
微信小程序开发系列（三十二）·如何通过小程序的API实现页面的上拉加载（onReachBottom事件）和下拉刷新（onPullDownRefresh事件）
最新发布
时光の尘的博客
03-14 1960
① usingComponents: 这里可以列出项目中所需要使用的组件，可以在这里注册项目自定义的组件，以便在页面中引用和调用。③ enablePullDownRefresh: 设置为 true 表示页面可以下拉刷新，用户下拉页面时会触发下拉刷新事件。① 在 app.json 或者 page.json 中开启允许下拉，同时可以配置 窗口、loading 样式等。下拉刷新是小程序中常见的一种刷新方式，当用户下拉页面时，页面会自动刷新，以便用户获取最新的内容。
【微信小程序-毕设期末大作业】微信小程序源码小程序页面生成器.zip
05-06
【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码
微信小程序--瀑布流展示效果（通用潮流网络直播、图片展示）
07-28
1、该瀑布流已经封装成组件，直接调用即可使用，方便简单快捷。 2、适用于直播、图片、文章展示等。 3、里面包含：组件、图片效果展示、使用方法。
微信小程序-如何分页加载数据
01-03
小程序通过数据库读取数据一次最多读取20条，云函数一次最多读取100条，所以如果我们要读取更多的数据就要借助分页加载，通过分次的加载数据，然后将每次获取到的数据拼接起来，就可以在页面显示更多的数据。 1、创建数据 首先在云开发数据库里新建一个有足够多数据的集合，最好在50条以上 2、使用说明 分页取数据主要用到的函数是用于分割的skip()和限制条数的limit() 具体的使用方法可以看官方说明文档：点击此处跳转 3、实现效果 每次触底都会加载数据 数据加载完毕 4、实现代码 index.js let totalData = 1 let db=wx.cloud.database() Pa
uniapp 解决onReachBottom失效
qq_43351090的博客
10-21 1万+
一、为什么失效？ 当给最外层view（container）设置overflow样式后，onReachBottom钩子不触发，去除overflow后，可触发，但存在某些样式问题。 .container{ height: 100vh; background-color: #F5F6FA; overflow: scroll; } 二、解决方案 1.去除overflow，直接修改page样式 page{ height: 100vh; background-color: #F5F6FA; }
uniapp项目中的上拉触底事件
weixin_72503508的博客
03-21 2703
1.1 在项目中的 pages.json 文件找到自己要做 上拉触底事件的页面配置 onReachBottomDistance。1.3 在获取数据的函数中 获取到数据之后不要立即赋值，要将之前的数据与下拉触底获取到的数据合并。通过公式：（页码数 * 每一页获取数据的条数 >= 总条数）如果符合则说明已经没有数据了。注意：不适合粘贴复制，只是怕大家看前面的关键代码段看的云里雾里，所以贴出完整代码以作对比。三、判断数据是否请求完成，如果请求完成就不应该继续发起请求了。3.1 在上拉触底事件中做判断。
uni-app - 页面上拉触底 onReachBottom() 懒加载自动计算分页、检查是否已经请求完全部数据、自动请求接口合并数据（判断分页懒加载是否继续请求接口数据，超详细触底请求后端示例教程）
王佳斌
10-07 3268
官方推荐最好用的uni-app上拉加载onReachBottom()如何实现懒加载分页判断，页面滚动到底部后请求数据填充到data中，使用onreachBottom实现页面触底加载及分页，uni-app项目序页面触底 onReachBottom() 懒加载自动计算分页、检查是否已经请求完全部数据、自动请求接口合并数据（高效自动判断分页懒加载是否继续请求接口数据，超详细触底请求后端示例教程）uniapp 上拉加载onReachBottom官方文档详解，实现上拉触底onReachBottom数据分页请求，设置触
微信小程序，uniapp的底部加载，滚动到底部刷新onReachBottom
Blue54的博客
05-09 4186
目录 onReachBottom了解 onReachBottom注意项： 事件具体写法： uni-load-more了解（不重要可自行考虑是否添加） getList事件具体（通过接口获取列表的事件） concat拼接： onReachBottom了解 使用uniapp的onReachBottom（）：页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。 onReachBottom（）具体了解可以查看官方api：页面简介 | uni-app官网 onReac
【uniapp】上拉触底加载更多的两种方式,组件里面和页面里面 scroll-view组件和onReachBottom触底方法,以及部分安卓机型scroll-view很难触发问题,且可以固定表头
$
02-20 7418
scroll-view组件和onReachBottom触底方法,以及部分安卓机型scroll-view很难触发问题,且可以固定表头
微信小程序判断页面滚动方向
勇敢的豆沙包
07-25 1290
Page({ onPageScroll(e){ clearTimeout(this.scrollTimer); this.scollArr = Array.isArray(this.scollArr) ? this.scollArr : []; //记录滚动坐标 this.scollArr.push(e.scrollTop); if (this.scollArr...
微信小程序页面传参 options的属性判断问题
热门推荐
暗影刀客的博客
03-31 1万+
最近遇到一个问题，小程序默认打开的参数和页面之间传递参数时，在目标页面要判断当前打开页面是否携带参数，也即 然后再做对应的处理，但是发现最近微信小程序更新之后，不管有没有传参，options都不会是一个null或者undefined，而是默认这样形式 可以明显的看到，这个看起来很像空对象结构的数据，并不是null或者undefined，所以想用if(options)来判断是否有值，就有点行不通...
微信小程序如何判断对象是否为空、判断值是否存在
Farel的博客
05-09 1万+
微信小程序如何判断定义的对象是否为空、如何判断对象中的未定义的值是否存在
微信小程序storage操作报错，判断是否能取到值
刘富国的博客
07-10 1925
微信小程序wx.getStorage报错，判断是否能取到值 1.取不到值时，控制台报错 2.解决办法:添加.catch(err=>{})捕获异常 wx.getStorage({ key: 'storageKey' }).then(data => { //能在storage中取到值 }).catch(err => { //storage取不到值 }) } ...
uniapp：在子组件中实现下拉加载（onReachBottom）和上拉刷新（onPullDownRefresh）
weixin_52614514的博客
11-29 1936
本篇文章借助uni.$emit()、uni.$on()和uni.$off()实现uniapp在子组件中下拉加载（onReachBottom）和上拉刷新（onPullDownRefresh）。
uniapp项目使用onReachBottom函数实现请求下一页数据，使用onPageScroll函数获取页面滚动条的滚动高度
肖帅的博客
03-10 2618
uniapp项目使用onReachBottom函数实现请求下一页数据，使用onPageScroll函数获取页面滚动条的滚动高度 一，需求：如下图所示，当滚动条滚动到一定位置时要将红色框内的内容放到最顶部并且位置固定。 二，实现内容： ①需要获取滚动高度 ②滚动条触底时可请求下一页的数据 图片位置固定 三，代码实现 可使用uni app提供的页面生命周期方法onReachBottom和onPageScroll实现 在onPageScroll 函数中，e.scrollTop可获取页面滚动高度 使用onRe
uni-app的列表如何使用onReachbottom分页加载
花儿为何这样红
06-25 3192
以前在pc端或者古早的移动端，大家还是比较喜欢用分页 一是网速比较慢，二是流量比较贵， 直接刷刷刷的，体验不是很好 但现在大家习惯了抖快的那种爽快感后，上滑继续加载，已经是很常见的设计......
uniapp小程序 触底刷新（onReachBottom）加载分页
小菜儿前端的博客
10-20 999
【代码】uniapp小程序 触底刷新（onReachBottom）加载分页。
uniapp上拉加载数据
09-23
要在uniapp中实现上拉加载数据，可以按照以下步骤操作： 1. 首先，在页面中添加一个监听上拉触底事件的函数，例如`onReachBottom`。 2. 在该函数中，检查当前是否正在加载数据的标志位，如果是，则不执行任何操作，避免重复加载数据。 3. 如果当前没有正在加载数据，将加载数据的标志位设置为true，然后执行加载数据的逻辑。 4. 在加载数据的逻辑中，根据需要进行数据的操作，例如重置关键数据、发送请求获取数据等。 5. 当数据请求完毕后，将加载数据的标志位设置为false，并执行回调函数`cb`，如果有的话。 6. 如果请求失败，可以根据需要进行错误处理，例如弹出提示信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王佳斌

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值