分页加载

components.d.ts

@@ -24,8 +24,7 @@ declare module '@vue/runtime-core' {
     VanDivider: typeof import('vant/es')['Divider']
     VanField: typeof import('vant/es')['Field']
     VanIcon: typeof import('vant/es')['Icon']
+    VanList: typeof import('vant/es')['List']
     VanStepper: typeof import('vant/es')['Stepper']
-    VanSwipe: typeof import('vant/es')['Swipe']
-    VanSwipeItem: typeof import('vant/es')['SwipeItem']
   }
 }

src/views/badge/record.vue

@@ -5,6 +5,12 @@
     </div>
     <div class="record-container">
       <div class="record-note">注：可点击效果图进行下单打印</div>
+      <van-list
+        v-model:loading="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+      >
         <div class="record-images" v-if="images.length > 0">
           <div class="record-image-item" v-for="item in images" :key="item.id">
             <block v-if="item.status == 1" @click="goPreview(item)">
@@ -22,6 +28,7 @@
         <div v-else class="record-image-item-null">
           <img src="@/assets/badge/null-data.png" alt="暂无数据">
         </div>
+      </van-list>
     </div>
   </div>
 </template>
@@ -43,7 +50,7 @@ function getList() {
   
   badgeApi.getLogOage({
     page: page.value,
-    pageSize: 10,
+    size: 100,
   }).then(res => {
     if(page.value === 1) {
       images.value = res.list
@@ -51,7 +58,7 @@ function getList() {
       images.value.push(...res.list)
     }
     
-    if(res.list.length < 10) {
+    if(res.total <= images.value.length) {
       finished.value = true
     } else {
       page.value++