Pull up loading principle

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 ’)

}

}

}

}