当前位置:网站首页>Pull up loading principle
Pull up loading principle
2022-07-05 10:43:00 【Code Bruce Lee】
Pull up loading principle
1、 Realize the idea
The rolling area is given a fixed height , Set up overflow-y:auto To achieve
The trigger condition : Visual height + Rolling height >= Actual height
Visual height : adopt dom Of offsetHeight obtain , Indicates the fixed height of the area ; But it is more recommended getBoundingClientRect() To get the height , Because using the former will cause browser reflow , Cause some performance problems
Rolling height : Scroll through e.target.scrollTop obtain , Indicates the distance from the scroll bar to the top px
Actual height : adopt dom Of scrollHeight obtain , Indicates the height of all contents in the area ( Including rolling distance ), That is, the actual height
2、 Basic implementation
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(‘ Touch bottom ’)
}
}
3、 Optimize : Add the distance to the bottom
Hope to trigger the event when there is still a certain distance from the bottom , Instead of waiting until the bottom is completely reached , And small programs onReachBottom almost
Declare a distance variable from the bottom reachBottomDistance
The trigger condition at this time is : Visual height + Rolling distance + reachBottomDistance >= Actual height
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(‘ Touch bottom ’)
}
}
}
}
4、 Optimize : Only trigger once after entering
At the bottom of the distance 100px The event is triggered successfully , But because of 100px The following areas are eligible , It will cause constant triggering , So we need to do something about it , Let it only trigger once after entering
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(‘ Touch bottom ’)
}
}
}
}
5、 Optimize : Real time access to variable , Immutable cache
Getting location information in real time will lose performance , You should cache the unchanged , Only get the real-time variable part
export default {
data() {
return {
isReachBottom: false,
reachBottomDistance: 100,
scrollHeight: 0,
offsetHeight: 0
}
},
mounted() {
// -> After the page is loaded, it will be highly cached
let dom = document.querySelector(‘.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(‘ Touch bottom ’)
}
}
}
}
边栏推荐
- uniapp
- 2021年山东省赛题库题目抓包
- Share Net lightweight ORM
- 2022年T电梯修理操作证考试题及答案
- [JS] array dimensionality reduction
- Secteur non technique, comment participer à devops?
- 2022年化工自动化控制仪表考试试题及在线模拟考试
- 【黑马早报】罗永浩回应调侃东方甄选;董卿丈夫密春雷被执行超7亿;吉利正式收购魅族;华为发布问界M7;豆瓣为周杰伦专辑提前开分道歉...
- [dark horse morning post] Luo Yonghao responded to ridicule Oriental selection; Dong Qing's husband Mi Chunlei was executed for more than 700million; Geely officially acquired Meizu; Huawei releases M
- 正则表达式
猜你喜欢
Secteur non technique, comment participer à devops?
Learning Note 6 - satellite positioning technology (Part 1)
Comparative learning in the period of "arms race"
2022年T电梯修理操作证考试题及答案
[paper reading] ckan: collaborative knowledge aware autonomous network for adviser systems
风控模型启用前的最后一道工序,80%的童鞋在这都踩坑
Who is the "conscience" domestic brand?
Blockbuster: the domestic IDE is released, developed by Alibaba, and is completely open source!
csdn软件测试入门的测试基本流程
WorkManager学习一
随机推荐
Solution of ellipsis when pytorch outputs tensor (output tensor completely)
微信核酸检测预约小程序系统毕业设计毕设(7)中期检查报告
Window下线程与线程同步总结
Glide Mastery
Activity enter exit animation
埋点111
磨砺·聚变|知道创宇移动端官网焕新上线,开启数字安全之旅!
九度 1480:最大上升子序列和(动态规划思想求最值)
风控模型启用前的最后一道工序,80%的童鞋在这都踩坑
谈谈对Flink框架中容错机制及状态的一致性的理解
Go project practice - parameter binding, type conversion
非技術部門,如何參與 DevOps?
Error: module not found: error: can't resolve 'xxx' in 'XXXX‘
SQL Server 监控统计阻塞脚本信息
LDAP overview
手机厂商“互卷”之年:“机海战术”失灵,“慢节奏”打法崛起
Based on shengteng AI Aibi intelligence, we launched a digital solution for bank outlets to achieve full digital coverage of information from headquarters to outlets
《通信软件开发与应用》课程结业报告
LSTM应用于MNIST数据集分类(与CNN做对比)
What is the most suitable book for programmers to engage in open source?