vue下拉刷新实现
使用第三方库实现下拉刷新
在Vue项目中，可以借助第三方库如vue-pull-refresh或mescroll.js快速实现下拉刷新功能。这些库封装了手势检测和动画效果，只需简单配置即可使用。
安装vue-pull-refresh：
npm install vue-pull-refresh --save示例代码：
<template>
<pull-refresh :on-refresh="onRefresh">
<!-- 列表内容 -->
<div v-for="item in list" :key="item.id">{{ item.text }}</div>
</pull-refresh>
</template>
<script>
import PullRefresh from 'vue-pull-refresh';
export default {
components: { PullRefresh },
data() {
return { list: [] };
},
methods: {
onRefresh() {
return new Promise(resolve => {
setTimeout(() => {
this.list = [...newData]; // 模拟数据更新
resolve();
}, 1000);
});
}
}
};
</script>自定义实现下拉刷新
若需完全自定义，可通过监听触摸事件和滚动位置实现核心逻辑：
-
监听触摸事件
在模板中绑定touchstart、touchmove和touchend事件：<div @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" > <div class="refresh-indicator" :style="{ transform: `translateY(${pullDistance}px)` }"> {{ refreshStatus }} </div> <slot></slot> </div> -
计算下拉距离
通过比较触摸位置的变化计算下拉距离：data() { return { startY: 0, pullDistance: 0, refreshStatus: '下拉刷新' }; }, methods: { handleTouchStart(e) { this.startY = e.touches[0].clientY; }, handleTouchMove(e) { const currentY = e.touches[0].clientY; if (currentY - this.startY > 0 && window.scrollY <= 0) { this.pullDistance = currentY - this.startY; this.refreshStatus = this.pullDistance > 50 ? '释放刷新' : '下拉刷新'; } } } -
触发刷新逻辑
释放时判断是否达到触发阈值：handleTouchEnd() { if (this.pullDistance > 50) { this.refreshStatus = '加载中...'; this.$emit('refresh'); // 触发父组件刷新 } this.pullDistance = 0; }
结合CSS动画优化体验
通过CSS过渡效果使下拉动作更流畅：
.refresh-indicator {
height: 50px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}注意事项
- 移动端需确保
touchmove事件不会触发浏览器默认行为（如页面滚动），可通过e.preventDefault()控制。 - 列表数据更新后，需重置下拉状态和动画。
- 在SSR（服务端渲染）场景下，需动态导入第三方库以避免客户端报错。
