vue上拉加载下拉刷新组件

上拉加载下拉刷新组件是一种在Vue中实现页面数据的动态加载和刷新的组件。它可以通过监听用户的上拉和下拉动作，触发相应的方法来更新页面数据。根据提供的引用内容，有两种方法可以实现该组件。

方法一：使用父组件调用的方法
在父组件的template块中，使用<wv-pull-refresh>标签包裹需要刷新的内容，然后在script块中导入组件并定义refresh方法，该方法会在下拉刷新时被调用，并在500ms后将子组件的状态归零。

<template>
  <wv-pull-refresh @refresh="refresh">
    <div>
      //页面内容......
    </div>
  </wv-pull-refresh>
</template>

<script>
import wvPullRefresh from "../../ui/wvPullRefresh"

export default {
  components: {
    wvPullRefresh
  },
  methods: {
    refresh(done) {
      setTimeout(() => {
        done() //把子组件的状态归0
      }, 500)
    }
  }
}
</script>

<style scoped lang="less">
// ...
</style>

方法二：使用工具类的方法
在组件的template块中，同样使用<wv-pull-refresh>标签包裹需要刷新的内容，然后在script块中导入工具类并定义refresh方法。在created生命周期钩子中监听scroll事件，并使用函数节流的思路限制方法的执行频率，防止滚动过程中方法被频繁调用。在setTimer方法中使用getMoreOfScroll方法判断是否滚动到底部，如果是则调用getDataList方法来获取数据，并在500ms后将子组件的状态归零。

<template>
  <wv-pull-refresh @refresh="refresh">
    <div>
      //页面内容......
    </div>
  </wv-pull-refresh>
</template>

<script>
import tools from '../../lib/tools'
import wvPullRefresh from "../../ui/wvPullRefresh"

export default {
  components: {
    wvPullRefresh
  },
  data () {
    return {
      valid: true
    }
  },
  created() {
    //监听scroll事件
    window.addEventListener('scroll', this.setTimer);
  },
  methods: {
    //因为工具类中方法滚动条还没到达底部就开始执行，向下滚动过程中方法会执行很多次
    //这里使用函数节流的思路给限制一下防止频繁调用
    setTimer() {
      if (!this.valid) {
        return false
      }
      this.valid = false
      setTimeout(() => {
        this.getMore()
        this.valid = true;
      }, 500)
    },
    getMore() {
      return tools.getMoreOfScroll(this.getDataList)
    },
    getDataList() {
      //ajax请求方法
    },
    refresh(done) {
      setTimeout(() => {
        done() //把子组件的状态归0
      }, 500)
    }
  }
}
</script>

<style scoped lang="less">
// ...
</style>