vue3中使用vant-list下拉加载

    <van-empty v-if="state.pageStatus === 'loading'" description="加载中..." />
    <van-empty v-if="state.pageStatus === 'empty'" description="暂无数据" />
    <van-list
      v-if="state.pageStatus === 'normal'"
      v-model:loading="state.isLoading"
      ref="vantList"
      :offset="30"
      :immediate-check="false"
      :finished="state.finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <docCard v-for="(item, index) in state.HCPList" :key="index" :data="item" @click="toView(item)" @changeFocus="changeFocus"></docCard>

    </van-list>

<script setup>
import { reactive } from 'vue'
const state = reactive({
  HCPList: [], //数据
  isLoading: false, // 列表的loading
  finished: false, //结束
  total: 0, //总数
  pageStatus: 'loading', //加载中提示
  page: 0,
  size: 10
})
//获取数据
const findDoctorTable = async () => {
  const query = {}//请求传参
  try {
    const res = await proxy.$api.doctor.getDoctorListNew(query)
    const rows = res.result.doctors
    state.isLoading = false
    state.total = res.result.total
    if (rows == null || rows.length === 0) {
      state.pageStatus = 'empty'
      state.finished = true
      return
    }
    state.HCPList = state.HCPList.concat(rows)
    state.pageStatus = 'normal'
    state.finished = false
    if (state.HCPList.length >= state.total) {
      state.finished = true
    }
  } catch (error) {
    state.isLoading = false
    state.finished = true
  }
}
// 筛选确认
const confirmDepartment = Json => {
  resetQuery()
  findDoctorTable()
}
const onLoad = () => {
  state.page++
  findDoctorTable()
}
const resetQuery = () => {
  state.pageStatus = 'loading'
  state.HCPList = []
  state.page = 1
}
</script>

1. van-empty 是 Vant 提供的组件，用于显示空数据或加载中的提示。在这里，通过 v-if 指令来根据 state.pageStatus 的值来判断显示哪种提示。如果 state.pageStatus 的值为 'loading'，则显示 "加载中..." 的提示；如果 state.pageStatus 的值为 'empty'，则显示 "暂无数据" 的提示。
2. van-list 也是 Vant 提供的组件，用于显示数据列表，并支持滚动加载更多数据。在这里，通过 v-if 指令来根据 state.pageStatus 的值来判断是否显示正常的数据列表。当 state.pageStatus 的值为 'normal' 时，显示数据列表。
3. v-model:loading="state.isLoading" 绑定了 van-list 组件的 loading 属性到 state.isLoading。这表示当 state.isLoading 的值为 true 时，列表会处于加载状态。
4. ref="vantList" 给 van-list 组件设置了一个引用，这样我们可以通过该引用访问 van-list 组件的方法和属性。
5. :offset="30" 设置了滚动加载时的阈值，表示当列表滚动到底部距离底部还有 30px 时，会触发加载更多数据的操作。
6. :immediate-check="false" 表示在初始化时不立即触发加载更多数据的操作。
7. :finished="state.finished" 绑定了 van-list 组件的 finished 属性到 state.finished。当 state.finished 的值为 true 时，表示数据已加载完毕，无需再触发加载更多数据。
8. finished-text="没有更多了" 设置了数据加载完毕时的文本提示。
9. @load="onLoad" 绑定了 van-list 组件的 load 事件到 onLoad 方法。当滚动加载触发时，会调用 onLoad 方法。
10. 在 van-list 内部使用 v-for 循环遍历 state.HCPList 中的数据，生成多个 docCard 组件。docCard 组件的数据来源是 state.HCPList 中的每个元素，每个 docCard 组件都会有一个唯一的 :key 绑定，以优化渲染性能。

总体来说，<template> 部分的代码根据 state.pageStatus 的值来显示不同的提示信息或数据列表。数据列表支持滚动加载更多数据，直到数据全部加载完毕（state.finished 为 true）为止。

1. 在 <script setup> 部分，我们使用了 import { reactive } from 'vue' 导入了 reactive 函数，用于创建响应式数据对象。
2. state 是一个响应式数据对象，其中包含了组件内部使用的状态信息，如HCPList（数据列表）、isLoading（列表的加载状态）、finished（数据是否已加载完毕）、total（总数据量）、pageStatus（页面加载状态）、page（当前页码）、size（每页数据条数）等。
3. findDoctorTable 是一个异步函数，用于获取数据。它会根据 query 对象向服务器发送请求，并根据响应结果更新 state 中的相关状态。如果获取到数据，则将其添加到 HCPList 中，并将 pageStatus 设置为 'normal'，如果没有数据，则将 pageStatus 设置为 'empty'，同时设置 finished 为 true 表示数据加载完毕。
4. confirmDepartment 是一个函数，用于确认部门筛选条件。它会重置查询参数并调用 findDoctorTable 方法重新获取数据。
5. onLoad 是一个函数，在滚动加载时触发。它会将 page 自增 1，并调用 findDoctorTable 方法获取更多数据。
6. resetQuery 是一个函数，用于重置查询参数和状态。在重新加载数据时，它会将 HCPList 清空，page 设为 1，pageStatus 设为 'loading'。

总体来说，这个组件实现了根据不同的页面加载状态显示不同的内容，可以根据不同条件向服务器请求数据，并在滚动加载时获取更多数据。在数据加载过程中，会显示适当的提示信息，如 "加载中..." 或 "暂无数据"。