列表触底加载

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;
+					}
 				}
 			}
 		}