在vue3里写一个用vant3的List列表有触底刷新

好的，下面是一个使用 Vant 3 List 组件实现触底刷新的 Vue 3 示例代码：

<template>
  <van-list
    :finished="finished"
    :loading="loading"
    @load="loadMore"
  >
    <van-cell v-for="(item, index) in list" :key="index">
      {{ item }}
    </van-cell>
  </van-list>
</template>

<script>
import { ref } from 'vue';
import { List, Cell } from 'vant';

export default {
  components: {
    [List.name]: List,
    [Cell.name]: Cell,
  },
  setup() {
    const list = ref(['Item 1', 'Item 2', 'Item 3']);
    const loading = ref(false);
    const finished = ref(false);

    const loadMore = () => {
      if (loading.value || finished.value) {
        return;
      }

      loading.value = true;

      // 模拟异步加载数据
      setTimeout(() => {
        const newData = ['Item 4', 'Item 5', 'Item 6'];

        if (newData.length) {
          list.value.push(...newData);
          loading.value = false;
        } else {
          finished.value = true;
        }
      }, 1000);
    };

    return {
      list,
      loading,
      finished,
      loadMore,
    };
  },
};
</script>

在这个示例中，我们在 List 组件上绑定了 `loading` 和 `finished` 属性，分别表示当前是否正在加载和是否已经加载完所有数据。我们在 List 组件上监听了 `load` 事件，该事件会在列表滚动到底部时触发，我们可以在该事件中加载更多数据。

在 `loadMore` 函数中，我们先判断当前是否正在加载或已经加载完所有数据，如果是则直接返回；否则将 `loading` 设置为 `true`，模拟异步加载数据，加载完成后将新数据添加到列表中，然后将 `loading` 设置为 `false`。如果新数据为空，则将 `finished` 设置为 `true`，表示已经加载完所有数据。

当然，这只是一个简单的示例，你可以根据实际需求来进行更复杂的操作。