vue 下拉刷新

Vue 中实现下拉刷新可以使用第三方库，比如 mint-ui、vux 等，也可以自己手动实现。下面是手动实现的一种方式：

1. 在模板中添加下拉刷新的 DOM 结构，例如：

<div class="refresh-wrapper" ref="refreshWrapper">
  <div class="refresh-icon" :class="{rotate: isLoading}">
    <img src="./refresh.png" alt="刷新图标">
  </div>
  <div class="refresh-text">{{refreshText}}</div>
</div>

2. 在脚本中定义相关的数据和方法：

export default {
  data() {
    return {
      refreshText: '下拉刷新',
      isLoading: false, // 是否正在加载
      startY: 0,
      moveY: 0,
      distance: 0, // 下拉距离
      refreshHeight: 50 // 触发下拉刷新的高度
    }
  },
  methods: {
    touchStart(e) {
      this.startY = e.touches[0].pageY
    },
    touchMove(e) {
      this.moveY = e.touches[0].pageY
      this.distance = this.moveY - this.startY
      if (this.distance > 0) {
        e.preventDefault() // 阻止默认事件，避免页面滚动
      }
    },
    touchEnd() {
      if (this.distance >= this.refreshHeight) {
        this.refresh() // 触发下拉刷新事件
      } else {
        this.reset() // 重置状态
      }
    },
    refresh() {
      this.isLoading = true // 显示加载动画
      this.refreshText = '正在刷新...'
      // 发送请求，获取数据
      setTimeout(() => {
        // 加载完成后重置状态
        this.reset()
      }, 2000)
    },
    reset() {
      this.isLoading = false
      this.distance = 0
      this.refreshText = '下拉刷新'
      this.$refs.refreshWrapper.style.transform = 'translateY(0)'
    }
  }
}

3. 在需要实现下拉刷新的组件中引入该组件并使用即可。

<template>
  <div class="list-wrapper"
       @touchstart="touchStart"
       @touchmove="touchMove"
       @touchend="touchEnd">
    <refresh></refresh> <!-- 引入下拉刷新组件 -->
    <ul class="list">
      <li v-for="(item, index) in list" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
import Refresh from './Refresh.vue'
export default {
  components: {
    Refresh
  },
  data() {
    return {
      list: ['item1', 'item2', 'item3']
    }
  }
}
</script>