VUE achieve listens scroll events, data lazy loading

Methods: {
     // Get the current position of the scroll bar 
    getScrollTop () { 
        the let scrollTop = 0
         IF (document.documentElement && document.documentElement.scrollTop) { 
            scrollTop = document.documentElement.scrollTop 
        } the else  IF (the document.body) { 
            scrollTop = document.body.scrollTop 
        } 
        return scrollTop 
    }, 
    // get the current height of the visible range 
    getClientHeight () { 
        the let the clientHeight = 0
         IF (&& document.body.clientHeightdocument.documentElement.clientHeight) { 
            the clientHeight = Math.min (document.body.clientHeight, document.documentElement.clientHeight) 
        } the else { 
            the clientHeight = Math.max (document.body.clientHeight, document.documentElement.clientHeight) 
        } 
        return the clientHeight 
    } , 

    // get the full height of the document 
    getScrollHeight () {
         return Math.max (document.body.scrollHeight, document.documentElement.scrollHeight) 
    }, 
    // scroll event trigger drop-down load 
    onScroll () {
         IF ( the this .getScrollHeight () -this.getClientHeight() - this.getScrollTop() <= 0) {
            if (this.status <= 5) {
                this.status++;
                // 调用请求函数
                this.axios.get('url'
                ).then(data => {
                    console.log(data)
                });
            } 
        }
    },
}

Monitor events

Mounted () {
     the this $ nextTick. ( function () { // solve view rendering, the data is not updated 
        window.addEventListener ( 'Scroll', the this .onScroll); 
    }) 
}

 

Guess you like

Origin www.cnblogs.com/skydragonli/p/11810803.html