vue2 写一个自动滚动列表鼠标放上去停止滚动直到鼠标离开继续滚动

在Vue.js 2.x中，我们可以利用`v-on mouseenter`和`v-on mouseleave`事件监听用户的鼠标进入和离开动作，并结合`vue-infinite-scroll`这个插件来实现实时滚动功能。当鼠标悬停时暂停滚动，鼠标移开则继续滚动。

首先，你需要安装`vue-infinite-loading`插件：

npm install vue-infinite-loading

然后在组件模板里引入并设置滚动行为：

<template>
  <div class="scroll-container">
    <ul ref="list" :infinite-scroll="loadMore" infinite-scroll-disabled="isPaused">
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import InfiniteScroll from 'vue-infinite-loading';

export default {
  components: {
    InfiniteScroll,
  },
  data() {
    return {
      items: [], // 初始化数据
      isPaused: false, // 初始滚动状态
    };
  },
  methods: {
    loadMore() {
      this.$refs.list.load(); // 模拟加载更多数据
      if (!this.isPaused) { // 鼠标离开后恢复滚动
        this.isPaused = true;
      }
    },
    handleMouseEnter() {
      this.isPaused = true; // 当鼠标进入时暂停滚动
    },
    handleMouseLeave() {
      this.isPaused = false; // 当鼠标离开时恢复滚动
    },
  },
  mounted() {
    this.handleMouseLeave(); // 初始化时停止滚动
  },
};
</script>

CSS部分用于调整样式以便鼠标悬停时显示明显效果：

.scroll-container {
  overflow-y: auto;
}

.scroll-container:hover .infinite-loading {
  display: none;
}

在这个例子中，当你把鼠标放在列表上时，`handleMouseEnter`会被触发，暂停滚动；当鼠标离开时，`handleMouseLeave`会执行，滚动恢复正常。记得替换`loadMore`里的`load()`为实际加载更多数据的行为。如果你不希望显示滚动加载指示器，可以修改CSS隐藏它。