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); }
}

注意事项

1. 移动端需要添加touch-action样式防止默认行为冲突
2. 滚动容器需设置正确的overflow属性
3. 刷新完成后需要手动调用完成回调
4. 考虑边界情况如快速滑动时的惯性处理
5. 在SSR场景下需要判断客户端环境再注册事件

以上实现可根据具体项目需求调整阈值、动画效果和状态提示文案。