当前位置:网站首页>上拉加载原理
上拉加载原理
2022-07-05 10:21:00 【码小龙.】
上拉加载原理
1、实现思路
滚定区域是给固定高度, 设置overflow-y:auto来实现
触发条件:可视高度 + 滚动高度 >= 实际高度
可视高度:通过dom的offsetHeight获取, 表示区域固定的高度; 但是更加推荐使用getBoundingClientRect()来获取高度, 因为使用前者会引起浏览器回流, 造成一些性能问题
滚动高度:滚动事件中通过e.target.scrollTop获取, 表示滚动条距离顶部的px
实际高度:通过dom的scrollHeight获取, 表示区域内所有内容的高度(包括滚定距离), 也就是实际的高度
2、基础实现
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(‘触底’)
}
}
3、优化:添加触底距离
希望离底部还有一定距离就触发事件, 而不是等到完全触底, 和小程序的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(‘触底’)
}
}
}
}
4、优化:进入后只触发一次
在距离底部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(‘触底’)
}
}
}
}
5、优化:实时获取可变, 不可变缓存
实时去获取位置信息会损耗性能, 应该将不变的缓存起来, 只获取实时可变的部分
export default {
data() {
return {
isReachBottom: false,
reachBottomDistance: 100,
scrollHeight: 0,
offsetHeight: 0
}
},
mounted() {
// -> 页面加载完成后将高度缓存起来
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(‘触底’)
}
}
}
}
边栏推荐
- [论文阅读] CKAN: Collaborative Knowledge-aware Atentive Network for Recommender Systems
- Coneroller执行时候的-26374及-26377错误
- AtCoder Beginner Contest 254「E bfs」「F st表维护差分数组gcd」
- ModuleNotFoundError: No module named ‘scrapy‘ 终极解决方式
- 学习笔记4--高精度地图关键技术(下)
- Write double click event
- IDEA新建sprintboot项目
- uniapp
- How to write high-quality code?
- 【JS】提取字符串中的分数,汇总后算出平均分,并与每个分数比较,输出
猜你喜欢
How to write high-quality code?
【Vite】1371- 手把手开发 Vite 插件
2022年流动式起重机司机考试题库及模拟考试
Apple 5g chip research and development failure? It's too early to get rid of Qualcomm
2022年危险化学品生产单位安全生产管理人员特种作业证考试题库模拟考试平台操作
Have you learned to make money in Dingding, enterprise micro and Feishu?
How can non-technical departments participate in Devops?
C language QQ chat room small project [complete source code]
Learning notes 5 - high precision map solution
【js学习笔记五十四】BFC方式
随机推荐
沟通的艺术III:看人之间 之倾听
csdn软件测试入门的测试基本流程
mongoDB副本集
数组、、、
报错:Module not found: Error: Can‘t resolve ‘XXX‘ in ‘XXXX‘
【js学习笔记五十四】BFC方式
Go项目实战—参数绑定,类型转换
Secteur non technique, comment participer à devops?
QT implements JSON parsing
C语言活期储蓄账户管理系统
ModuleNotFoundError: No module named ‘scrapy‘ 终极解决方式
SqlServer定时备份数据库和定时杀死数据库死锁解决
uniapp
小程序中自定义行内左滑按钮,类似于qq和wx消息界面那种
Learning II of workmanager
Coneroller执行时候的-26374及-26377错误
Have the bosses ever encountered such problems in the implementation of flinksql by Flink CDC mongdb?
Completion report of communication software development and Application
WorkManager的学习二
正则表达式