vue实现下啦刷新

Vue 实现下拉刷新

使用第三方库（推荐）

安装 vue-pull-refresh 库：

npm install vue-pull-refresh --save

在组件中引入并使用：

<template>
  <pull-refresh :on-refresh="onRefresh">
    <div class="content">
      <!-- 列表内容 -->
    </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>

原生实现

通过监听 touch 事件和滚动事件实现：

<template>
  <div 
    class="pull-refresh"
    @touchstart="touchStart"
    @touchmove="touchMove"
    @touchend="touchEnd"
  >
    <div class="refresh-tip" :style="{ transform: `translateY(${moveY}px)` }">
      {{ refreshText }}
    </div>
    <div class="content">
      <!-- 列表内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startY: 0,
      moveY: 0,
      refreshing: false,
      refreshText: '下拉刷新'
    }
  },
  methods: {
    touchStart(e) {
      this.startY = e.touches[0].pageY;
    },
    touchMove(e) {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 0) return;

      const moveY = e.touches[0].pageY - this.startY;
      if (moveY > 0) {
        this.moveY = moveY;
        if (moveY > 50) {
          this.refreshText = '释放刷新';
        } else {
          this.refreshText = '下拉刷新';
        }
      }
    },
    touchEnd() {
      if (this.moveY > 50) {
        this.refreshing = true;
        this.refreshText = '刷新中...';
        this.refreshData();
      } else {
        this.moveY = 0;
      }
    },
    refreshData() {
      // 刷新数据逻辑
      setTimeout(() => {
        this.refreshing = false;
        this.moveY = 0;
        this.refreshText = '下拉刷新';
      }, 1000);
    }
  }
}
</script>

<style>
.pull-refresh {
  position: relative;
  overflow: hidden;
}
.refresh-tip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}
</style>

结合 Better-Scroll 实现

安装 Better-Scroll：

npm install better-scroll --save

实现代码：

<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <div class="refresh-tip">{{ refreshText }}</div>
      <!-- 列表内容 -->
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll';

export default {
  data() {
    return {
      scroll: null,
      refreshText: '下拉刷新'
    }
  },
  mounted() {
    this.initScroll();
  },
  methods: {
    initScroll() {
      this.scroll = new BScroll(this.$refs.wrapper, {
        pullDownRefresh: {
          threshold: 50,
          stop: 20
        },
        click: true
      });

      this.scroll.on('pullingDown', () => {
        this.refreshText = '刷新中...';
        this.refreshData();
      });
    },
    refreshData() {
      setTimeout(() => {
        // 刷新数据逻辑
        this.refreshText = '下拉刷新';
        this.scroll.finishPullDown();
        this.scroll.refresh();
      }, 1000);
    }
  }
}
</script>

<style>
.wrapper {
  height: 100vh;
  overflow: hidden;
}
.refresh-tip {
  height: 50px;
  line-height: 50px;
  text-align: center;
}
</style>

注意事项

• 移动端实现需考虑 touch 事件
• 下拉距离阈值通常设为 50px 左右
• 刷新完成后需要重置状态
• 列表数据更新后需要重新计算滚动区域高度（Better-Scroll 需调用 refresh()）
• 性能优化：避免频繁触发事件，可使用节流函数