小程序列表如何实现懒加载功能？

本文共计2177个文字，预计阅读时间需要9分钟。

目录+小程序上的列表懒加载+分页加载+使用scroll事件监听+使用IntersectionObserver监听+前端分页渲染+用IntersectionObserver替代onReachBottom+加需求！+demo源码+参考+小程序上的列表懒加载+长列表我们！

目录

• 小程序上的列表懒加载
• 分页加载
• 用scroll事件监听
• 用IntersectionObserver监听
• 前端分页渲染
• 用IntersectionObserver代替onReachBottom
• 加需求！
• demo源码
• 参考

小程序上的列表懒加载

长列表我们经常接触到，长列表为什么需要懒加载呢，因为一旦渲染内容多了，渲染引擎就需要更多的时间去渲染画面，这时可能会出现页面白屏、卡顿等。而用户其实只需要看到视窗内的内容就可以了，不用一次性把全部内容渲染完，所以可以通过懒加载实现。

分页加载

常见的列表懒加载是和后端一起实现，也就是分页加载。前端请求第几页的数据，后端就返回第几页的数据。前端要实现的交互就是当用户滑动到页面底部时，就要请求下一页的数据。