vant-list,vant tab list,vant-cli,vant 商品列表,vant list onload无效,vant list加载更多
Vant3 List 列表是一种基于 Vue.js 和 Vant3 UI 组件库的可视化列表组件，用于展示滚动式数据集合。它支持无限滚动和下拉刷新等功能，并提供多种布局和自定义选项。

以下是一个简单的 Vant3 List 列表例子：

html
<template>
<van-list v-model="list" :finished="finished" @load="onLoad" ref="list">
<template #header>
<h3>这是列表头部</h3>
</template>
<template #default="{ item }">
<van-cell :title="item.title" :label="item.label"></van-cell>
</template>
<template #footer>
<van-button block type="primary">查看更多</van-button>
</template>
</van-list>
</template>

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

export default {
components: {
[List.name]: List,
[Cell.name]: Cell,
[Button.name]: Button,
},
setup() {
const state = reactive({
list: [],
page: 1,
limit: 10,
finished: false,
})

const onLoad = async () => {
// 模拟异步加载数据
const res = await api.getList(state.page, state.limit)

if (res.data.length) {
state.list = [...state.list, ...res.data]
state.page++
} else {
state.finished = true
}
}

return {
list: state.list,
finished: state.finished,
onLoad,
}
},
}
</script>


这个例子展示了一个简单的 Vant3 List 列表，它通过模拟异步加载数据来实现无限滚动。列表包括一个头部、多个单元格和一个底部，其中单元格通过 template 插槽渲染，并根据加载的数据动态生成。 ref 属性用于在组件中获取列表实例，从而可以调用其方法。