Vue3 之简单制作scroll组件

一、效果图

二、组件xscroll

<template>
    <div ref="scrollEle" :style="scrollStyle" @scroll="onScroll">
        <slot></slot>
    </div>
</template>

<script setup>
    import {
        ref
    } from 'vue'

    const emit = defineEmits(['scroll'])

    const scrollEle = ref(null)

    const props = defineProps({
        scrollStyle: Object
    })

    const onScroll = () => {
        if (scrollEle.value) {
            let {
                scrollHeight,
                clientHeight,
                scrollTop
            } = scrollEle.value
            if (scrollHeight == clientHeight + scrollTop) {
                console.log('到底了')
                emit('scroll')
            }
        }
    }
</script>

<style scoped>

</style>

三、使用

<x-scroll :style="{border: '1px solid', overflowY: 'auto', 'height': '400px'}" @scroll="onScroll2">
    <div style="line-height: 50px;" v-for="(item,index) in list" :key="index">
        {{item}}
    </div>
</x-scroll>

<script setup>
    import {
        ref,
        inject,
        reactive,
        onMounted
    } from 'vue'
    
    import XScroll from './XScroll.vue';

    const list = reactive([])
    const targetElement = ref(null)

    const onScroll2 = () => {
        getList()
    }
    
    const getList = () => {
        setTimeout(function(){
            var len = list.length;
            console.log(len)
            for(var i = len; i < len + 15; i++) {
                list.push(i);
            }
        }, 1000)
    }
    
    onMounted(() => {
        getList()
    })
</script>