vue 实现下拉刷新
vue 实现下拉刷新的方法
使用第三方库（如vant）
安装vant库的PullRefresh组件，快速实现下拉刷新功能。
npm install vant在组件中引入并使用：
<template>
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<!-- 列表内容 -->
</van-pull-refresh>
</template>
<script>
import { PullRefresh } from 'vant';
export default {
components: {
[PullRefresh.name]: PullRefresh
},
data() {
return {
isLoading: false
};
},
methods: {
onRefresh() {
setTimeout(() => {
// 刷新数据逻辑
this.isLoading = false;
}, 1000);
}
}
};
</script>原生实现方案
通过监听touch事件实现自定义下拉刷新。
<template>
<div class="refresh-container"
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd">
<div class="refresh-control" :style="{ transform: `translateY(${distance}px)` }">
<!-- 下拉提示内容 -->
</div>
<!-- 列表内容 -->
</div>
</template>
<script>
export default {
data() {
return {
startY: 0,
distance: 0,
isLoading: false
};
},
methods: {
touchStart(e) {
this.startY = e.touches[0].pageY;
},
touchMove(e) {
const currentY = e.touches[0].pageY;
if (currentY - this.startY > 0 && window.scrollY <= 0) {
this.distance = currentY - this.startY;
}
},
touchEnd() {
if (this.distance > 50) {
this.isLoading = true;
this.onRefresh();
}
this.distance = 0;
},
onRefresh() {
// 数据刷新逻辑
setTimeout(() => {
this.isLoading = false;
}, 1000);
}
}
};
</script>
<style>
.refresh-container {
position: relative;
overflow: hidden;
}
.refresh-control {
position: absolute;
width: 100%;
text-align: center;
transition: transform 0.3s;
}
</style>注意事项
- 移动端需要添加viewport meta标签确保触摸事件正常触发
- 下拉距离阈值建议设置为50-80px
- 刷新完成后需要重置状态和动画
- 列表内容需要确保有足够高度才能触发下拉
两种方案各有优势，第三方库实现更快捷，原生方案可控性更强。根据项目需求选择合适方案。
