vue3 vant list 组件 不触发上拉加载 和 onload事件

如果vue3 vant list 组件不触发上拉加载和onLoad事件，可能是以下原因：

1. 没有设置List组件的高度属性。

在List组件中，必须设置height属性，否则无法触发上拉加载功能。你可以设置一个固定的高度或者一个动态计算的高度，例如：

<van-list :height="500" @load="onLoad"></van-list>

2. 没有设置List组件的loading属性。

loading属性是用来控制上拉加载的状态的，如果没有设置loading属性，上拉加载功能将无法正常工作。你可以在setup中定义一个ref变量来控制loading属性，例如：

<template>
  <van-list :height="500" :loading="loading" @load="onLoad"></van-list>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const loading = ref(false);

    const onLoad = () => {
      loading.value = true;
      // ...
    };

    return {
      loading,
      onLoad,
    };
  },
};
</script>

3. 没有在List组件上绑定@load事件。

上拉加载的触发需要依赖@load事件，如果没有在List组件上绑定该事件，上拉加载功能将无法正常工作。你可以在List组件上绑定一个方法，例如：

<template>
  <van-list :height="500" :loading="loading" @load="onLoad"></van-list>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const loading = ref(false);

    const onLoad = () => {
      loading.value = true;
      // ...
    };

    return {
      loading,
      onLoad,
    };
  },
};
</script>

如果以上方法都没有解决问题，你可以尝试检查控制台输出，查看是否有相关的错误信息。