vue3+vant3实现懒加载与分页效果。

前段时间用vue3.3+vant3做了一个移动端的 小程序项目 ，里面涉及到了 懒加载与分页功能，今天总结一下 。

先看下vant官方的文档：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/list

官网给到了相关的代码 是list列表我这边的实际效果是这样—>

vant-list 套 van-cell,既 列表懒加载 内部是单元格组件，废话不多说 直接看代码 ：

index.vue

<van-list v-model="loading" :finished="finished" finished-text="暂时没有更多了～" @load="listOnLoad"
  class="finished-text" v-model:error="error" error-text="加载失败,请重试!">
     <UploadItem v-for="(item,index) in fileItemArr" :key="item.file_id" :listData="item" :listIndex='index' />
    
</van-list>

export default {
  components: {
    UploadItem: defineAsyncComponent(() =>
      import("./uploadItem.vue")
    ),
  },

data() {
    return {
      loading: false,
      finished: false,
      error: false,
      fileItemArr: [],
      patiendValue: '',
      pageNum: 1, //当前页
      per_page: 30, //当前页显示多少条
    }
  },

methods: {
async listOnLoad() {
      if (this.latestLoadTime) clearTimeout(this.latestLoadTime) //每次进来先清理上一次的计时
      this.latestLoadTime = setTimeout(async () => {//设置计时器异步获取
        try { //如果没异常
          let res = await getXcxFileList({ page: this.pageNum, limit: this.per_page, relation_id: this.patiendValue }); //请求后端接口 
         // if (this.pageNum === 1) { //如果是第一页把文件夹展示
           // this.fileDirArr = res.folder.data
            //this.fileItemArr = [];
          //}
          const results = res.file.data // 获取接口的数据 
          this.fileItemArr.push(...results) //动态添加到数组里
          // 3将本次加载的loading关闭
          this.loading = false
          // 4判断是否还有数据
          if (results.length) {
            // 有，则更新获取下一个数据的页码
            this.pageNum++
          } else {
            // 没有，则将加载状态finished设置为结束
            this.finished = true
          }
        } catch (err) {
          this.error = true
          this.loading = false
        }
      }, 100)
    },
}

uploadItem.vue

<template>
  <van-cell center :title="listData.file_memo" :value="createTime" :label="userLabel" :icon="headImage"
    class="cell-content" @click="viewImgFun(listData,listIndex)" />
</template>
<script>
import { Cell, List, ImagePreview } from 'vant';
export default {
  props: ['listData', 'listIndex'],
  components: {
    [Cell.name]: Cell,
    [List.name]: List,
    [ImagePreview.name]: ImagePreview,
  },
  data() {
    return {
      createTime: '',
      userLabel: '',
      headImage: '',
    };
  },
}

最后来看一下效果 :