lanecarford_front/src/components/MyList.vue

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount } from 'vue'
	const props = defineProps({
		loading: { default: false, type: Boolean },
		finish: { default: false, type: Boolean },
		pel: { default: () => {}, type: Function }
	})
	const emit = defineEmits(['load'])
	const el = ref()
	const placeholder = ref()
	const observer = ref()
	onMounted(() => {
		observer.value = new IntersectionObserver(
			(entries, observer) => {
				if (!entries[0].intersectionRatio || props.loading || props.finish) return
				emit('load')
			},
			{ root: props.pel() || el.value }
		).observe(placeholder.value)
	})
	onBeforeUnmount(() => {
		observer.value?.disconnect()
	})
</script>
<template>
	<div class="my-list" ref="el">
		<slot></slot>
		<div class="footer">
			<p v-show="!loading" class="placeholder" ref="placeholder"></p>
			<span class="loading" v-show="loading">Loading...</span>
			<span class="nomore" v-show="finish">No more</span>
		</div>
	</div>
</template>
<style lang="less" scoped>
	.my-list {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		> .footer {
			width: 100%;
			font-size: 3rem;
			color: #000;
			text-align: center;
			margin: var(--my-list-footer-margin, 0);
			> .placeholder {
				height: 1px;
			}
		}
	}
</style>