vue3 + ts +vant 中的van-list如何实现滚动到底部加载下一页数据

要实现滚动到底部加载下一页数据，可以使用 `van-list` 中的 `@scroll.native` 事件来监听滚动事件，然后通过计算列表高度和滚动高度来判断是否滚动到了底部。

具体实现步骤如下：

1. 给 `van-list` 组件添加 `ref` 属性，用于获取组件实例。

<van-list ref="list" :finished="isFinished" :loading="isLoading" @load="onLoad">
  ...
</van-list>

2. 在 `mounted` 钩子函数中，获取 `van-list` 组件实例，并给 `window` 对象添加 `scroll` 事件监听器。

import { defineComponent, onMounted, ref } from 'vue';
import { List } from 'vant';

export default defineComponent({
  components: { VanList },
  setup() {
    const listRef = ref(null);

    onMounted(() => {
      const listInstance = listRef.value.$el;
      window.addEventListener('scroll', () => {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        if (scrollTop + clientHeight >= scrollHeight && listInstance.offsetHeight) {
          // 滚动到底部，触发加载更多
        }
      });
    });

    return {
      listRef,
    };
  },
});

3. 在 `@load` 事件中，将 `isFinished` 和 `isLoading` 属性设置为 `true` 和 `false`，表示数据已经加载完成或正在加载中。

export default defineComponent({
  components: { VanList },
  setup() {
    const listRef = ref(null);
    const isFinished = ref(false);
    const isLoading = ref(false);

    const onLoad = () => {
      if (!isFinished.value && !isLoading.value) {
        isLoading.value = true;
        // 发送网络请求，获取下一页数据
        // 请求成功后，将 isLoading 设置为 false，表示加载完成
      }
    };

    onMounted(() => {
      const listInstance = listRef.value.$el;
      window.addEventListener('scroll', () => {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        if (scrollTop + clientHeight >= scrollHeight && listInstance.offsetHeight) {
          onLoad();
        }
      });
    });

    return {
      listRef,
      isFinished,
      isLoading,
      onLoad,
    };
  },
});

这样，当滚动到底部时，就会触发 `onLoad` 方法，从而加载下一页数据。需要注意的是，在数据全部加载完成后，需要将 `isFinished` 设置为 `true`，以防止重复加载数据。