<template>
<div>
<van-pull-refresh
v-model="isLoading"
@refresh="onRefresh"
>
<!-- 刷新内容放在这里 -->
<div v-for="item in list" :key="item.id">{{ item.text }}</div>
</van-pull-refresh>
</div>
</template>
<script>
export default {
data() {
return {
isLoading: false,
list: [
{ id: 1, text: '内容1' },
{ id: 2, text: '内容2' },
{ id: 3, text: '内容3' }
]
};
},
methods: {
onRefresh() {
// 模拟异步刷新数据
setTimeout(() => {
// 刷新完成后，重置 isLoading 状态
this.isLoading = false;
// 更新数据
this.list = [
{ id: 4, text: '新内容1' },
{ id: 5, text: '新内容2' },
{ id: 6, text: '新内容3' }
];
// 如果有其他操作，也可以在这里执行
}, 1000);
}
}
};
</script>
在上面的例子中，van-pull-refresh 组件通过 v-model 绑定了 isLoading 属性，用于控制下拉刷新状态。当用户下拉刷新时，会触发 @refresh 事件，执行 onRefresh 方法。在该方法中，你可以进行异步的数据加载操作，加载完成后重置 isLoading 状态，并更新数据。
请确保你已经正确引入了 Vant 组件库，并按照其文档进行了配置。
转载请注明出处：http://www.zyzy.cn/article/detail/5674/Vant