<template>
<div class="list-show" id="scroll" :style="{ height: props.height }">
<slot></slot>
</div>
</template>
<script setup>
import { onMounted, ref, onBeforeUnmount, nextTick } from 'vue';
const emit = defineEmits(['onEarth']);
const props = defineProps({
height: {
type: String,
default: '200px',
},
offset: {
type: Number,
default: -3,
},
});
const isReachButtom = ref(false);
onMounted(() => {
let dom = document.querySelector('.list-show');
dom.addEventListener('scroll', () => autocycle(dom));
});
const autocycle = (dom) => {
let scrollTop = dom.scrollTop;
let scrollHeight = dom.scrollHeight;
let offsetHeight = Math.ceil(dom.getBoundingClientRect().height);
let currentHeight = scrollTop + offsetHeight;
if (currentHeight < scrollHeight && isReachButtom.value) {
isReachButtom.value = false;
}
if (isReachButtom.value) {
return;
}
if (currentHeight >= scrollHeight + props.offset) {
isReachButtom.value = true;
//可视高度+滚动高度 + 距离底部的触发距离>=实际高度
console.log("触底");
emit('onEarth');
}
};
</script>
<style lang="scss" scoped>
.list-show {
box-sizing: border-box;
overflow: auto;
word-wrap: break-word;
margin: 0 0;
white-space: pre-line;
}
</style>
滚动加载组件
最新推荐文章于 2024-08-21 14:09:37 发布