vue实现下啦刷新

Vue 实现下拉刷新

使用第三方库（推荐）

安装 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 = this.getNewData();
          resolve();
        }, 1000);
      });
    },
    getNewData() {
      // 返回新数据
      return [...];
    }
  }
};
</script>

原生实现

监听触摸事件，手动实现下拉逻辑：

<template>
  <div 
    class="pull-refresh"
    @touchstart="touchStart"
    @touchmove="touchMove"
    @touchend="touchEnd"
    :style="{ transform: `translateY(${translateY}px)` }"
  >
    <div class="refresh-tip">
      {{ refreshTip }}
    </div>
    <!-- 内容区域 -->
    <div class="content">
      <!-- 你的内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startY: 0,
      translateY: 0,
      isRefreshing: false,
      refreshTip: '下拉刷新'
    };
  },
  methods: {
    touchStart(e) {
      this.startY = e.touches[0].pageY;
    },
    touchMove(e) {
      const moveY = e.touches[0].pageY;
      const distance = moveY - this.startY;

      if (distance > 0 && window.scrollY <= 0) {
        e.preventDefault();
        this.translateY = Math.min(distance, 100);
        this.refreshTip = this.translateY >= 60 ? '释放刷新' : '下拉刷新';
      }
    },
    touchEnd() {
      if (this.translateY >= 60) {
        this.isRefreshing = true;
        this.refreshTip = '刷新中...';
        this.onRefresh();
      } else {
        this.translateY = 0;
      }
    },
    onRefresh() {
      // 你的刷新逻辑
      setTimeout(() => {
        this.isRefreshing = false;
        this.translateY = 0;
        this.refreshTip = '下拉刷新';
      }, 1000);
    }
  }
};
</script>

<style>
.pull-refresh {
  transition: transform 0.3s;
}
.refresh-tip {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

注意事项

• 原生实现需要考虑边界情况，如页面滚动位置
• 第三方库通常提供更完善的动画和交互效果
• 移动端需要添加 touch-action CSS 属性防止默认行为冲突
• 刷新完成后需要重置状态

两种方式各有优劣，根据项目需求选择合适方案。