使用Element-UI的InfiniteScroll 无限滚动的时候，怎么让鼠标滑倒的时候才刷新，而不是一开始就刷新

Element-UI 的 InfiniteScroll 组件默认是在滚动到底部时触发加载更多数据的。如果需要在滑动到底部之后才刷新数据，可以通过以下步骤实现：

1. 在需要使用 InfiniteScroll 的组件上添加 `@scroll.native` 事件监听器，如下所示：

<template>
  <div class="container" @scroll.native="handleScroll">
    <!-- 渲染数据列表 -->
    <div v-for="(item, index) in dataList" :key="index">{{ item }}</div>
    <!-- 使用 InfiniteScroll 组件触发加载更多数据 -->
    <el-infinite-scroll @load="loadMoreData" :distance="10"></el-infinite-scroll>
  </div>
</template>

2. 在 `handleScroll` 方法中判断是否滑动到底部，并保存一个标识符来控制是否需要刷新数据，如果没有滑动到底部则将标识符重置为 `false`，如下所示：

export default {
  data() {
    return {
      dataList: [], // 数据列表
      isEnd: false, // 是否滑动到底部
    };
  },
  methods: {
    // 监听滚动事件
    handleScroll() {
      const container = this.$el;
      const scrollHeight = container.scrollHeight; // 滚动容器高度
      const scrollTop = container.scrollTop; // 滚动条距离容器顶部的距离
      const offsetHeight = container.offsetHeight; // 可视区域高度
      // 如果滑动到底部
      if (scrollTop + offsetHeight >= scrollHeight - 10) {
        this.isEnd = true;
      } else {
        this.isEnd = false;
      }
    },
    // 加载更多数据
    loadMoreData() {
      // 如果滑动到底部，则刷新数据
      if (this.isEnd) {
        // 调用接口获取数据
        // ...
      }
    },
  },
};

3. 在 `loadMoreData` 方法中判断是否需要刷新数据，并在需要的时候调用接口获取数据，如下所示：

export default {
  methods: {
    // 加载更多数据
    loadMoreData() {
      // 如果滑动到底部，则刷新数据
      if (this.isEnd) {
        // 调用接口获取数据
        fetchData().then((res) => {
          // 将新数据添加到列表末尾
          this.dataList = this.dataList.concat(res.data);
          // 重置标识符
          this.isEnd = false;
        });
      }
    },
  },
};

通过以上步骤，就可以实现在滑动到底部之后才刷新数据的效果了。