添加触底加载

src/components/MyList.vue

@@ -42,6 +42,7 @@
 			font-size: 3rem;
 			color: #000;
 			text-align: center;
+			margin: var(--my-list-footer-margin, 0);
 			> .placeholder {
 				height: 1px;
 			}

src/views/Workshop/library.vue

@@ -2,24 +2,31 @@
 	import { ref, reactive, onMounted, inject } from 'vue'
 	import HeaderTitle from '@/components/HeaderTitle.vue'
 	import FooterNavigation from '@/components/FooterNavigation.vue'
+	import MyList from '@/components/myList.vue'
 	const emit = defineEmits(['view-type'])
 
 	onMounted(() => {
 		emit('view-type', 1)
 	})
+	const loading = ref(false)
+	const finish = ref(false)
+	const list = reactive([])
 
-	const list = reactive([
+	const onLoad = () => {
-		{ id: 1, userID: '1111111111', datetime: '7/22/2025 18:20', lastopened: '18:20' },
+		loading.value = true
-		{ id: 2, userID: '2222222222', datetime: '7/22/2025 18:20', lastopened: '18:20' },
+		setTimeout(() => {
-		{ id: 3, userID: '3333333333', datetime: '7/22/2025 18:20', lastopened: '18:20' },
+			for (var i = 0; i < 10; i++) {
-		{ id: 4, userID: '4444444444', datetime: '7/22/2025 18:20', lastopened: '18:20' },
+				list.push({
-		{ id: 5, userID: '5555555555', datetime: '7/22/2025 18:20', lastopened: '18:20' },
+					id: list.length + 1,
-		{ id: 6, userID: '6666666666', datetime: '7/22/2025 18:20', lastopened: '18:20' },
+					userID: 10000000 + list.length,
-		{ id: 7, userID: '7777777777', datetime: '7/22/2025 18:20', lastopened: '18:20' },
+					datetime: '7/22/2025 18:20',
-		{ id: 8, userID: '8888888888', datetime: '7/22/2025 18:20', lastopened: '18:20' },
+					lastopened: '18:20'
-		{ id: 9, userID: '9999999999', datetime: '7/22/2025 18:20', lastopened: '18:20' },
+				})
-		{ id: 10, userID: '0000000000', datetime: '7/22/2025 18:20', lastopened: '18:20' }
+			}
-	])
+			loading.value = false
+			if (list.length >= 50) finish.value = true
+		}, 1500)
+	}
 	const onRetrieveItem = (i: number) => {
 		console.log('检索' + i)
 	}
@@ -34,6 +41,7 @@
 	<div class="library">
 		<div class="title">Library</div>
 		<div class="list">
+			<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
 				<div class="item" v-for="(v, i) in list" :key="v.id">
 					<div class="image">
 						<img src="@/assets/images/workshop/posture/posture_1.png" />
@@ -46,6 +54,7 @@
 					</div>
 					<div class="delete" @click="deleteItem(i)"><SvgIcon name="delete2" size="30" /></div>
 				</div>
+			</my-list>
 		</div>
 	</div>
 	<footer-navigation is-placeholder />
@@ -88,19 +97,24 @@
 		}
 		> .list {
 			flex: 1;
-			overflow-y: auto;
+			overflow: hidden;
-			padding: 0 3.8rem;
 			margin: 0 3rem;
+			> .my-list {
+				padding: 0 3.8rem;
+				--my-list-footer-margin: 2rem 0;
 				> .item {
 					position: relative;
 					padding: 2.8rem;
 					width: 100%;
 					height: 34.4rem;
 					border-radius: 1.88rem;
-				margin-bottom: 7.66rem;
 					background-color: #f3f3f3;
 					display: flex;
 					align-items: center;
+					margin-top: 7.66rem;
+					&:first-child {
+						margin-top: 0;
+					}
 					> .image {
 						width: 21.4rem;
 						height: 100%;
@@ -178,4 +192,5 @@
 				}
 			}
 		}
+	}
 </style>