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>