上拉loading加载原理

上拉加载原理
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(‘触底’)
}
}
}
}