当前位置：首页 > VUE

vue下拉刷新实现

2026-02-11 09:08:51VUE

vue下拉刷新实现

使用第三方库（推荐）

安装vue-pull-refresh库：

npm install vue-pull-refresh --save

在组件中引入并使用：

vue下拉刷新实现

import VuePullRefresh from 'vue-pull-refresh'

export default {
  components: {
    VuePullRefresh
  },
  methods: {
    onRefresh() {
      // 模拟异步加载
      setTimeout(() => {
        // 获取新数据后调用complete方法
        this.$refs.pullRefresh.complete()
      }, 1000)
    }
  }
}

模板中使用：

<vue-pull-refresh ref="pullRefresh" @refresh="onRefresh">
  <!-- 内容区域 -->
  <div v-for="item in list" :key="item.id">{{ item.text }}</div>
</vue-pull-refresh>

原生实现方案

监听touch事件实现基础下拉效果：

vue下拉刷新实现

export default {
  data() {
    return {
      startY: 0,
      distance: 0,
      loading: false
    }
  },
  methods: {
    touchStart(e) {
      this.startY = e.touches[0].pageY
    },
    touchMove(e) {
      const currentY = e.touches[0].pageY
      this.distance = currentY - this.startY

      // 只有向下滑动且页面在顶部时才触发
      if (this.distance > 0 && window.scrollY <= 0) {
        e.preventDefault()
        // 可以在这里添加下拉动画效果
      }
    },
    touchEnd() {
      if (this.distance > 50) {  // 下拉距离阈值
        this.loading = true
        this.loadData()
      }
      this.distance = 0
    },
    loadData() {
      // 数据加载逻辑
      setTimeout(() => {
        this.loading = false
      }, 1000)
    }
  }
}

结合better-scroll实现

安装better-scroll：

npm install better-scroll --save

组件实现：

import BScroll from 'better-scroll'

export default {
  mounted() {
    this.initScroll()
  },
  methods: {
    initScroll() {
      this.scroll = new BScroll(this.$refs.wrapper, {
        pullDownRefresh: {
          threshold: 50,
          stop: 20
        },
        click: true
      })

      this.scroll.on('pullingDown', () => {
        this.fetchData().then(() => {
          this.scroll.finishPullDown()
          this.scroll.refresh()
        })
      })
    },
    fetchData() {
      // 返回Promise的数据获取方法
    }
  }
}