vue下拉刷新实现方案

Vue 下拉刷新实现方案

使用第三方库（如 vant 或 mescroll.js）

安装 vant 库：

npm install vant

引入 van-pull-refresh 组件：

<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div>下拉刷新内容</div>
  </van-pull-refresh>
</template>

<script>
import { PullRefresh } from 'vant';
export default {
  data() {
    return {
      isLoading: false
    };
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    }
  }
};
</script>

自定义实现方案

监听触摸事件实现下拉刷新：

<template>
  <div 
    class="pull-refresh" 
    @touchstart="handleTouchStart" 
    @touchmove="handleTouchMove" 
    @touchend="handleTouchEnd"
  >
    <div class="refresh-indicator" :style="{ transform: `translateY(${pullDistance}px)` }">
      {{ refreshText }}
    </div>
    <div class="content">
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startY: 0,
      pullDistance: 0,
      isRefreshing: false,
      threshold: 50 // 触发刷新的阈值
    };
  },
  computed: {
    refreshText() {
      if (this.isRefreshing) return '刷新中...';
      return this.pullDistance > this.threshold ? '释放刷新' : '下拉刷新';
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startY = e.touches[0].clientY;
    },
    handleTouchMove(e) {
      if (this.isRefreshing) return;
      const currentY = e.touches[0].clientY;
      this.pullDistance = Math.max(0, currentY - this.startY);
    },
    handleTouchEnd() {
      if (this.pullDistance > this.threshold) {
        this.isRefreshing = true;
        this.onRefresh();
      }
      this.pullDistance = 0;
    },
    onRefresh() {
      // 模拟异步请求
      setTimeout(() => {
        this.isRefreshing = false;
      }, 1500);
    }
  }
};
</script>

<style>
.pull-refresh {
  position: relative;
  overflow: hidden;
}
.refresh-indicator {
  text-align: center;
  padding: 10px;
  transition: transform 0.3s;
}
</style>

使用原生滚动事件

通过监听 scroll 事件实现：

<template>
  <div class="scroll-container" ref="scrollContainer" @scroll="handleScroll">
    <div class="scroll-content">
      <div class="refresh-indicator">{{ refreshText }}</div>
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRefreshing: false,
      scrollTop: 0
    };
  },
  computed: {
    refreshText() {
      return this.isRefreshing ? '刷新中...' : '下拉刷新';
    }
  },
  methods: {
    handleScroll() {
      this.scrollTop = this.$refs.scrollContainer.scrollTop;
      if (this.scrollTop < -50 && !this.isRefreshing) {
        this.isRefreshing = true;
        this.onRefresh();
      }
    },
    onRefresh() {
      setTimeout(() => {
        this.isRefreshing = false;
      }, 1000);
    }
  }
};
</script>

<style>
.scroll-container {
  height: 100vh;
  overflow-y: auto;
}
.refresh-indicator {
  text-align: center;
  padding: 10px;
}
</style>

结合 better-scroll 实现

安装 better-scroll：

npm install better-scroll

封装下拉刷新组件：

<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <div class="refresh-indicator">{{ refreshText }}</div>
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll';
export default {
  data() {
    return {
      bs: null,
      isRefreshing: false
    };
  },
  mounted() {
    this.bs = new BScroll(this.$refs.wrapper, {
      pullDownRefresh: {
        threshold: 50,
        stop: 40
      }
    });
    this.bs.on('pullingDown', this.onRefresh);
  },
  methods: {
    onRefresh() {
      this.isRefreshing = true;
      setTimeout(() => {
        this.bs.finishPullDown();
        this.isRefreshing = false;
      }, 1000);
    }
  }
};
</script>

以上方案可根据项目需求选择，第三方库（如 vant）适合快速集成，自定义方案灵活性更高。