vue实现下拉刷新组件
实现下拉刷新组件的核心思路
使用Vue实现下拉刷新功能需要结合触摸事件监听、滚动位置判断和动画反馈。以下是两种常见实现方式：
基于原生事件监听的方式
注册touchstart、touchmove和touchend事件监听器，计算手指滑动距离：
<template>
<div class="pull-refresh" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
<div class="refresh-head" :style="{ transform: `translateY(${translateY}px)` }">
<span v-if="!isLoading">{{ statusText }}</span>
<spinner v-else />
</div>
<slot></slot>
</div>
</template>
<script>
export default {
data() {
return {
startY: 0,
translateY: 0,
isLoading: false,
statusText: '下拉刷新'
}
},
methods: {
onTouchStart(e) {
this.startY = e.touches[0].pageY
},
onTouchMove(e) {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
if (scrollTop > 0) return
const deltaY = e.touches[0].pageY - this.startY
if (deltaY > 0) {
this.translateY = Math.min(deltaY, 100)
this.statusText = deltaY > 50 ? '释放刷新' : '下拉刷新'
}
},
onTouchEnd() {
if (this.translateY > 50) {
this.isLoading = true
this.statusText = '加载中...'
this.$emit('refresh', this.onRefreshDone)
} else {
this.translateY = 0
}
},
onRefreshDone() {
this.isLoading = false
this.translateY = 0
}
}
}
</script>使用第三方库简化实现
安装vue-pull-refresh等现成组件库：
npm install vue-pull-refresh --save基础使用示例：
<template>
<pull-refresh :on-refresh="onRefresh">
<div>页面内容...</div>
</pull-refresh>
</template>
<script>
import PullRefresh from 'vue-pull-refresh'
export default {
components: {
PullRefresh
},
methods: {
onRefresh() {
return new Promise(resolve => {
setTimeout(() => {
resolve()
}, 1000)
})
}
}
}
</script>样式与动画优化
添加CSS过渡效果提升用户体验：
.pull-refresh {
position: relative;
overflow: hidden;
}
.refresh-head {
position: absolute;
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(-100%);
transition: transform 0.3s ease;
}
.spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}注意事项
- 移动端需要添加
touch-action样式防止默认行为冲突 - 滚动容器需设置正确的
overflow属性 - 刷新完成后需要手动调用完成回调
- 考虑边界情况如快速滑动时的惯性处理
- 在SSR场景下需要判断客户端环境再注册事件
以上实现可根据具体项目需求调整阈值、动画效果和状态提示文案。
