首页 > PHP资讯 > HTML5培训技术 > web前端开发中上拉加载解析

web前端开发中上拉加载解析

HTML5培训技术

web前端开发中上拉加载解析

 

效果,贴上效果展示:

实现思路

样式方面不多赘述,滚动区域是给固定高度,设置 overflow-y: auto 来实现。
接下来看看js方面的实现,其实也很简单,触发的条件是:可视高度 + 滚动距离 >= 实际高度 。例子我会使用vue来实现,和原生实现是一样的。
可视高度(offsetHeight):通过 dom 的 offsetHeight 获得,表示区域固定的高度。这里我推荐通过 getBoundingClientRect() 来获取高度,因为使用前者会引起浏览器回流,造成一些性能问题。
滚动高度(scrollTop):滚动事件中通过 e.target.scrollTop 获取,表示滚动条距离顶部的px
实际高度(scrollHeight):通过 dom 的 scrollHeight 获得,表示区域内所有内容的高度(包括滚动距离),也就是实际高度
基础实现

加点细节

加点细节,现在我们希望是离底部一定距离就触发事件,而不是等到完全触底。如果你做过小程序,这和onReachBottom差不多的意思。
声明一个离底部的距离变量reachBottomDistance
这时候触发条件:可视高度 + 滚动距离 + reachBottomDistance >= 实际高度

在距离底部100px时成功触发事件,但由于100px往下的区域是符合条件的,会导致一直触发,这不是我们想要的。
接下来做一些处理,让其进入后只触发一次:

优化

实时去获取位置信息稍微会损耗性能,我们应该把不变的缓存起来,只实时获取可变的部分

本文来源于欣才IT学院原创发布,未经许可,禁止转载。