vue3 vant list 组件设置高度上拉加载

你可以通过以下步骤设置vue3 vant list组件的高度和上拉加载功能：

1. 在你的Vue组件中，导入List组件和Cell组件：

<template>
  <van-list
    :height="height"
    :loading="loading"
    :finished="finished"
    @load="onLoad"
  >
    <van-cell
      v-for="(item, index) in list"
      :key="index"
      :title="item.title"
    />
  </van-list>
</template>

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

export default {
  components: {
    [List.name]: List,
    [Cell.name]: Cell,
  },
  setup() {
    const height = ref(500); // 设置高度
    const loading = ref(false);
    const finished = ref(false);
    const list = ref([]);

    const onLoad = () => {
      // 请求数据
      loading.value = true;
      setTimeout(() => {
        // 模拟异步请求数据
        for (let i = 0; i < 10; i++) {
          list.value.push({
            title: `Item ${list.value.length + 1}`,
          });
        }
        loading.value = false;

        // 数据加载完成
        if (list.value.length >= 40) {
          finished.value = true;
        }
      }, 1000);
    };

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

2. 在List组件中，设置height属性为你想要的高度，比如500px。

3. 在List组件中，绑定loading属性和finished属性，用来控制上拉加载的状态。

4. 在List组件中，绑定load事件，用来触发上拉加载功能。

5. 在load事件中，请求数据并更新list数组，同时根据数据是否加载完成，更新loading和finished属性。

这样就可以设置vue3 vant list组件的高度和上拉加载功能了。