列表触底加载

src/components/MyList.vue

@@ -0,0 +1,50 @@
+<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">Mo 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;
+			> .placeholder {
+				height: 1px;
+			}
+		}
+	}
+</style>