分页加载

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,23 +5,30 @@
     </div>
     <div class="record-container">
       <div class="record-note">注：可点击效果图进行下单打印</div>
-      <div class="record-images" v-if="images.length > 0">
+      <van-list
-        <div class="record-image-item" v-for="item in images" :key="item.id">
+        v-model:loading="loading"
-          <block v-if="item.status == 1" @click="goPreview(item)">
+        :finished="finished"
-            <img :src="item.path" :alt="item.name" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
+        finished-text="没有更多了"
-            <div class="record-image-item-shadow"></div>
+        @load="onLoad"
-          </block>
+      >
-          <div v-else-if="item.status == 0" class="record-image-item-loading">
+        <div class="record-images" v-if="images.length > 0">
-            设计中
+          <div class="record-image-item" v-for="item in images" :key="item.id">
-          </div>
+            <block v-if="item.status == 1" @click="goPreview(item)">
-          <div v-else-if="item.status == 2" class="record-image-item-loading">
+              <img :src="item.path" :alt="item.name" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
-            设计失败
+              <div class="record-image-item-shadow"></div>
+            </block>
+            <div v-else-if="item.status == 0" class="record-image-item-loading">
+              设计中
+            </div>
+            <div v-else-if="item.status == 2" class="record-image-item-loading">
+              设计失败
+            </div>
           </div>
         </div>
-      </div>
+        <div v-else class="record-image-item-null">
-      <div v-else class="record-image-item-null">
+          <img src="@/assets/badge/null-data.png" alt="暂无数据">
-        <img src="@/assets/badge/null-data.png" alt="暂无数据">
+        </div>
-      </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++