列表触底加载

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>

src/views/Workshop/creation.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-	import { ref, onMounted } from 'vue'
+	import { ref, reactive, onMounted } from 'vue'
 	import HeaderTitle from '@/components/HeaderTitle.vue'
 	import FooterNavigation from '@/components/FooterNavigation.vue'
+	import MyList from '@/components/myList.vue'
 
 	import { useRouter } from 'vue-router'
 	const router = useRouter()
@@ -17,6 +18,19 @@
 	const onContinue = () => {
 		router.push({ name: 'end' })
 	}
+	const list = reactive([{},{},{},{},{},{}])
+	const loading = ref(false)
+	const finish = ref(false)
+	const onLoad = () => {
+		loading.value = true
+		setTimeout(() => {
+			list.push({},{},{},{},{},{})
+			loading.value = false
+			if (list.length >= 20) {
+				finish.value = true
+			}
+		}, 1500)
+	}
 </script>
 
 <template>
@@ -24,9 +38,11 @@
 	<div class="creation">
 		<div class="title">Your Creation</div>
 		<div class="list">
-			<div class="item" v-for="i in 10" :key="i">
-				<img src="@/assets/images/workshop/posture/posture_1.png" />
-			</div>
+			<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
+				<div class="item" v-for="(v,i) in list" :key="i">
+					<img src="@/assets/images/workshop/posture/posture_1.png" />
+				</div>
+			</my-list>
 		</div>
 		<div class="btns">
 			<button @click="onSave">Save</button>
@@ -57,25 +73,27 @@
 		}
 		> .list {
 			flex: 1;
-			overflow-y: auto;
-			padding: 0 6rem;
 			margin: 0 3.8rem;
-			display: flex;
-			flex-wrap: wrap;
-			justify-content: space-between;
-			// justify-content: space-around;
-			> .item {
-				width: 47%;
-				height: 52.9rem;
-				overflow: hidden;
-				border-radius: 2rem;
-				background-color: #fff;
-				margin-bottom: 4rem;
-				border: 0.1rem solid #000;
-				> img {
-					width: 100%;
-					height: 100%;
-					object-fit: contain;
+			overflow: hidden;
+			> .my-list {
+				padding: 0 6rem;
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: space-between;
+				// justify-content: space-around;
+				.item {
+					width: 47%;
+					height: 52.9rem;
+					overflow: hidden;
+					border-radius: 2rem;
+					background-color: #fff;
+					margin-bottom: 4rem;
+					border: 0.1rem solid #000;
+					> img {
+						width: 100%;
+						height: 100%;
+						object-fit: contain;
+					}
 				}
 			}
 		}