vue-滚动加载组件

Posted 2020-12-19 sybboy

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