vue-滾動加載組件

<template>
<div id="infiniteScroll" class="infinite-scroll">
    <slot></slot>
</div>
</template>

<script>
/** 
 * 用法：
 * 將該組件放在列表最下方，其直接父級元素為滾動的包含塊
 * window.INFINITE_BUSY 用來控制是否監聽無限加載
 * dis為開始進行下次加載的檢測距離
*/
export default {
    data(){
        return {
            
        }
    },
    props:{
        dis:{
            type:Number,
            default:200
        }
    },
    mounted(){
        let detectDom = document.getElementById('infiniteScroll');
        let scrollDom = this.scrollDom = detectDom.parentElement;
        scrollDom.addEventListener('scroll',this.scrollMonitor);
        window.INFINITE_BUSY = false;
    },
    methods:{
        scrollMonitor(){
            if(window.INFINITE_BUSY) return;
            requestAnimationFrame(this.loadMonitor);
            window.INFINITE_BUSY = true;
        },
        loadMonitor(){
            let scrollDom = this.scrollDom;
            let totalLength = scrollDom.scrollHeight;
            let viewLength = scrollDom.clientHeight;
            let scrollLength = scrollDom.scrollTop;
            
            if(totalLength > viewLength && viewLength + scrollLength > totalLength - this.dis){
                this.$emit('loadmore')
                return
            }

            window.INFINITE_BUSY = false;
        }
    }
}
</script>

<style lang="postcss">

</style>

getWindowHeight(){
let windowHeight = 0;
　　if(document.compatMode == "CSS1Compat"){
　　　　windowHeight = document.documentElement.clientHeight;
　　}else{
　　　　windowHeight = document.body.clientHeight;
　　}
　　return windowHeight;
},
videoScroll(e){
if(!this.shouldAj){
return
}
if(this.remian>0){
if((e.target.scrollTop + this.getWindowHeight()+100) >= document.getElementsByClassName('page')[0].scrollHeight){
this.start+=19
　　 this.getRecommendList()
　　 }
}
},