vue实现下拉刷新组件

Vue 下拉刷新组件实现

核心思路
通过监听 touch 事件计算滑动距离，结合 CSS 过渡动画实现下拉效果，触发刷新回调。

基础实现步骤

监听 touch 事件
在组件 mounted 阶段绑定 touchstart/touchmove/touchend 事件：

mounted() {
  this.$el.addEventListener('touchstart', this.handleTouchStart)
  this.$el.addEventListener('touchmove', this.handleTouchMove)
  this.$el.addEventListener('touchend', this.handleTouchEnd)
}

计算滑动距离
记录初始 Y 坐标，计算移动距离：

handleTouchStart(e) {
  this.startY = e.touches[0].pageY
}

handleTouchMove(e) {
  const currentY = e.touches[0].pageY
  this.distance = currentY - this.startY
  if (this.distance > 0) {
    e.preventDefault()
  }
}

状态控制
根据距离切换不同状态：

data() {
  return {
    state: 'waiting', // waiting/pulling/loading
    distance: 0,
    startY: 0
  }
}

动画效果实现

CSS 过渡样式
为下拉区域添加平滑过渡：

.pull-refresh {
  transition: transform 0.3s ease;
}

动态位移计算
根据距离动态设置 transform：

get transformStyle() {
  return `translateY(${this.distance}px)`
}

阈值判断
设置触发刷新的最小距离（通常 50-80px）：

handleTouchEnd() {
  if (this.distance > 80) {
    this.state = 'loading'
    this.$emit('refresh')
  } else {
    this.reset()
  }
}

完整组件示例

模板结构

<template>
  <div class="pull-refresh" :style="transformStyle">
    <div class="refresh-head">
      <span v-if="state === 'loading'">加载中...</span>
      <span v-else>下拉刷新</span>
    </div>
    <slot></slot>
  </div>
</template>

状态重置方法

methods: {
  reset() {
    this.distance = 0
    this.state = 'waiting'
  },
  finishRefresh() {
    this.reset()
  }
}

优化方向

节流处理
避免 touchmove 事件高频触发：

handleTouchMove: _.throttle(function(e) {
  // 计算逻辑
}, 16)

自定义插槽
支持自定义加载动画和提示文案：

<template v-slot:loading>
  <custom-spinner />
</template>

弹性效果
实现越界回弹的物理效果：

if (this.distance > 100) {
  this.distance = 100 + (this.distance - 100) * 0.5
}

第三方库推荐

1. mescroll.js
   支持 Vue 的完整下拉刷新/上拉加载解决方案

2. vue-pull-refresh
   轻量级组件，支持自定义动画

3. vant-ui PullRefresh
   有赞团队开发的成熟组件

   

实现时需注意移动端事件兼容性和性能优化，建议使用 passive event listeners 提升滚动性能。