首先，确保你已经安装了 Vant4 和 Vue.js。你可以通过 npm 或 yarn 安装：
npm install vant@next
# 或
yarn add vant@next
然后，在你的 Vue 组件中，可以像这样使用 PullRefresh 组件：
<template>
<div>
<!-- 使用 vant-pull-refresh 组件 -->
<van-pull-refresh
:refreshing="refreshing"
@refresh="onRefresh"
>
<!-- 刷新内容放在这里 -->
<ul>
<li v-for="item in list" :key="item.id">{{ item.text }}</li>
</ul>
</van-pull-refresh>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// 使用 ref 创建一个响应式变量，用于控制下拉刷新状态
const refreshing = ref(false);
// 模拟的数据列表
const list = ref([
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' },
{ id: 3, text: 'Item 3' },
]);
// 下拉刷新时触发的方法
const onRefresh = () => {
// 模拟异步刷新数据的过程
setTimeout(() => {
// 刷新完成后重置下拉刷新状态
refreshing.value = false;
}, 1000);
};
return {
refreshing,
list,
onRefresh,
};
},
};
</script>
在这个例子中，我们使用了 van-pull-refresh 组件，通过 :refreshing 属性和 @refresh 事件来控制和处理下拉刷新的状态。当用户下拉刷新时，onRefresh 方法会被调用，你可以在这个方法中执行异步的刷新操作。在示例中，我们使用了 setTimeout 模拟异步刷新数据的过程，1 秒后重置 refreshing 的值为 false，表示刷新完成。
这只是一个简单的示例，你可以根据实际需求进行更复杂的下拉刷新操作。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5824/Vant