vant下拉选择,vant 下拉框,vant 上下滑动,vant拖拽,vant下拉加载,vant ui下拉加载
Vant3 PullRefresh 是一种 Vue.js 组件库 Vant3 提供的下拉刷新组件，用于在移动端应用或网页中实现下拉刷新功能。当用户下拉列表或页面时，可以触发该组件的下拉事件，从而重新加载数据或执行其他操作。

该组件支持自定义下拉刷新的样式和内容，并可以与其它组件结合使用。

以下是一个简单的例子：


<template>
<van-pull-refresh v-model="show" @refresh="onRefresh">
<div v-for="item in list" :key="item.id">{{ item.name }}</div>
</van-pull-refresh>
</template>

<script>
export default {
data() {
return {
show: false,
list: []
}
},
methods: {
onRefresh() {
// 模拟获取新数据
setTimeout(() => {
this.list = [{ id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }, { id: 3, name: 'Orange' }]
this.show = false // 收起下拉刷新状态
}, 1000)
}
},
mounted() {
// 页面首次加载时获取数据
this.onRefresh()
}
}
</script>


上面的代码中，我们在一个 van-pull-refresh 组件中渲染了一个包含多个项目的列表。当用户下拉此列表时，会触发 onRefresh 方法，该方法会模拟异步加载新数据并将其放入 list 属性中。当新数据加载完毕后，show 属性会被设置为 false，从而使下拉刷新状态收起。