首先，确保你已经安装了 Vant4 和 Vue.js。你可以通过 npm 或 yarn 安装：
npm install vant@next
# 或
yarn add vant@next
然后，在你的项目中，可以像这样使用 List 组件：
<template>
<div>
<!-- 使用 vant-list 组件 -->
<van-list v-model="finished" finished-text="加载完成" error-text="加载失败" @load="load">
<!-- 列表项的插槽 -->
<template #default="{ item, index }">
<van-cell :title="item.title" :label="item.label" />
</template>
</van-list>
</div>
</template>
<script>
import { ref } from 'vue';
import { List, Cell } from 'vant';
export default {
components: {
[List.name]: List,
[Cell.name]: Cell,
},
setup() {
// 使用 ref 创建一个响应式变量，用于标识列表是否加载完成
const finished = ref(false);
// 模拟的列表数据
const listData = [
{ title: '标题1', label: '标签1' },
{ title: '标题2', label: '标签2' },
{ title: '标题3', label: '标签3' },
];
// 加载列表数据的方法
const load = () => {
// 模拟异步加载数据
setTimeout(() => {
// 更新列表数据
listData.push({ title: '标题4', label: '标签4' });
// 将 finished 设为 true，表示加载完成
finished.value = true;
}, 1000);
};
return {
finished,
listData,
load,
};
},
};
</script>
在这个例子中，我们使用了 van-list 组件，通过 v-model 绑定了一个响应式变量 finished，用于标识列表是否加载完成。通过 finished-text 和 error-text 属性设置加载完成和加载失败时的提示文本。通过 @load 事件绑定了加载数据的方法 load。
在 van-list 组件内部，我们使用了 template 插槽来定义列表项的显示方式，这里使用了 van-cell 组件来展示每一项的标题和标签。
你可以根据实际需求调整列表的配置项、样式以及加载数据的逻辑。
转载请注明出处：http://www.zyzy.cn/article/detail/5836/Vant