Is the listening page of vue to the bottom?

Is the vue listening page at the bottom?

Loading data lists are often used in projects. You can quickly implement them using component libraries. So, sort out the native writing methods.

Ideas

Distance from the top + visual area height == scroll bar height If established, it means that it has reached the bottom of the page

Get the distance from the top:

var scrollTop = ||;

Get the visible area height:

var windowHeight =  || ;

Get the scrollbar height:

var scrollHeight = ||;

Note: Used in vue's created hook

= function(){…}: The function that triggers the listening

created(){
	 = function(){
   		var scrollTop = ||;
   		var windowHeight =  || ;
   		var scrollHeight = ||;
        
        if(scrollTop+windowHeight==scrollHeight){
           //Write function to load data in the background         	("Far from the top"+scrollTop+"Visual Area Height"+windowHeight+"Total scroll bar height"+scrollHeight);
        }   
    }
}

How to listen to whether the page scrolls to the bottom

Listen to whether scrolling to the bottom Most apps are loading more features. Without further ado, serve the dishes directly.

Consider the vue rendering rules. Scroll listening needs to be performed after element rendering. Otherwise, the corresponding dom node cannot be obtained.

So you need to use $nextTick() in conjunction with

cont is the listening area, 'scroll' is the addition event, it is the method, and the div binds ref="cont".

mounted() {
    this.$nextTick(()=>{
        this.$('scroll',)
    })
}

Scroll determines whether it reaches the bottom. If it is finally done, you can request data or other operations.

scroll(e) {
            let scrollTop = ; // When sliding into the screen scroll bar, the distance from the top            let windowHeitht = ; //The height of the page you can see            let scrollHeight = ; //The height of the entire div monitored (including what you see now and what you hide from the upper and lower parts)            let total = scrollTop + windowHeitht
            if(total == scrollHeight){
                ("It's the end")
                //Loading operation            }else {
                ("Not the end yet")
            } 
        }

If you don't want to load data, you can remove the scroll event to avoid wasting performance.

this.$('scroll',)

Notice:

Be sure to add the height and excess part to the scrolling area, otherwise the event will not be triggered.

Scroll area class= "cont".

.cont {
    overflow: scroll;
    width: 100%;
    height: 677px;
}

This is all about whether the event listening scrolls to the bottom, it is actually not difficult.

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.