【JS】687- 几行代码摸清楚上拉加载原理
时间:2022-07-23
本文章向大家介绍【JS】687- 几行代码摸清楚上拉加载原理,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
作者:chanwahfung
https://www.cnblogs.com/chanwahfung
效果
贴上效果展示:
实现思路
样式方面不多赘述,滚动区域是给固定高度,设置 overflow-y: auto
来实现。
接下来看看js方面的实现,其实也很简单,触发的条件是:可视高度
+ 滚动距离
>= 实际高度
。例子我会使用vue
来实现,和原生实现是一样的。
- 可视高度(offsetHeight):通过
dom
的offsetHeight
获得,表示区域固定的高度。这里我推荐通过getBoundingClientRect()
来获取高度,因为使用前者会引起浏览器回流,造成一些性能问题。 - 滚动高度(scrollTop):滚动事件中通过
e.target.scrollTop
获取,表示滚动条距离顶部的px - 实际高度(scrollHeight):通过
dom
的scrollHeight
获得,表示区域内所有内容的高度(包括滚动距离),也就是实际高度
基础实现
onScroll(e) {
let scrollTop = e.target.scrollTop
let scrollHeight = e.target.scrollHeight
let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
let currentHeight = scrollTop + offsetHeight
if (currentHeight >= scrollHeight) {
console.log('触底')
}
}
so easy~
加点细节
加点细节,现在我们希望是离底部一定距离就触发事件,而不是等到完全触底。如果你做过小程序,这和onReachBottom
差不多的意思。
声明一个离底部的距离变量reachBottomDistance
这时候触发条件:可视高度
+ 滚动距离
+ reachBottomDistance
>= 实际高度
export default {
data(){
return {
reachBottomDistance: 100
}
},
methods: {
onScroll(e) {
let scrollTop = e.target.scrollTop
let scrollHeight = e.target.scrollHeight
let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
let currentHeight = scrollTop + offsetHeight + this.reachBottomDistance
if (currentHeight >= scrollHeight) {
console.log('触底')
}
}
}
}
在距离底部100px时成功触发事件,但由于100px往下的区域是符合条件的,会导致一直触发,这不是我们想要的。
接下来做一些处理,让其进入后只触发一次:
export default {
data(){
return {
isReachBottom: false,
reachBottomDistance: 100
}
},
methods: {
onScroll(e) {
let scrollTop = e.target.scrollTop
let scrollHeight = e.target.scrollHeight
let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
let currentHeight = scrollTop + offsetHeight + this.reachBottomDistance
if(currentHeight < scrollHeight && this.isReachBottom){
this.isReachBottom = false
}
if(this.isReachBottom){
return
}
if (currentHeight >= scrollHeight) {
this.isReachBottom = true
console.log('触底')
}
}
}
}
优化
实时去获取位置信息稍微会损耗性能,我们应该把不变的缓存起来,只实时获取可变的部分
export default {
data(){
return {
isReachBottom: false,
reachBottomDistance: 100
scrollHeight: 0,
offsetHeight: 0,
}
},
mounted(){
// 页面加载完成后 将高度存储起来
let dom = document.querySelector('.comment-area .comment-list')
this.scrollHeight = dom.scrollHeight
this.offsetHeight = Math.ceil(dom.getBoundingClientRect().height)
},
methods: {
onScroll(e) {
let scrollTop = e.target.scrollTop
let currentHeight = scrollTop + this.offsetHeight + this.reachBottomDistance
if(currentHeight < this.scrollHeight && this.isReachBottom){
this.isReachBottom = false
}
if(this.isReachBottom){
return
}
if (currentHeight >= this.scrollHeight) {
this.isReachBottom = true
console.log('触底')
}
}
}
}
实现到这里就告一段落,如果你有更好的思路和值得改进的地方,欢迎交流~
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 从零开始重新认识 SpringMVC
- 字节跳动Android实习面试凉凉经,两轮面试我被完虐了...
- 高效、简单、方便管理与维护的开源运维工单系统
- python数据库入门编程。
- EasyExcel导出自定义合并单元格策略
- CMake学习笔记
- 性能分析(2)- 应用程序 CPU 使用率过高案例
- 性能测试必备知识(7)- 深入理解“CPU 使用率”
- Jmeter 常用函数(31)- 详解 __iterationNum
- Jmeter 常用函数(30)- 详解 __if
- Jmeter 常用函数(29)- 详解 __eval
- Jmeter 常用函数(28)- 详解 __FileToString
- Jmeter 常用函数(26)- 详解 __chooseRandom
- Jmeter 常用函数(25)- 详解 __V
- Java8新特性