vue-seamless-scroll 监听滚动事件

要在 `vue-seamless-scroll` 组件中监听滚动事件，可以使用 `@scroll` 指令来实现。在组件上添加 `@scroll` 指令，并将其绑定到一个方法上，该方法将会在滚动事件触发时被调用。

以下是一个示例代码：

<template>
  <div class="scroll-container" ref="scrollContainer">
    <vue-seamless-scroll :data="scrollData" :speed="scrollSpeed" @scroll="handleScroll">
      <template slot-scope="{ item }">
        <div class="item">{{ item }}</div>
      </template>
    </vue-seamless-scroll>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollData: ['Item 1', 'Item 2', 'Item 3', 'Item 4'], // 滚动的数据
      scrollSpeed: 50 // 滚动的速度
    };
  },
  methods: {
    handleScroll() {
      // 在这里处理滚动事件
      console.log('滚动事件触发');
    }
  },
  mounted() {
    // 获取滚动容器的 DOM 元素并添加滚动事件监听器
    const scrollContainer = this.$refs.scrollContainer;
    scrollContainer.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    // 在组件销毁前，移除滚动事件监听器
    const scrollContainer = this.$refs.scrollContainer;
    scrollContainer.removeEventListener('scroll', this.handleScroll);
  }
};
</script>

<style scoped>
.scroll-container {
  width: 300px;
  height: 200px;
  overflow-y: auto;
}
.item {
  height: 50px;
  line-height: 50px;
  text-align: center;
}
</style>

在上面的示例中，我们在 `vue-seamless-scroll` 组件的外层包裹了一个 `div`，并给其添加了一个类名为 `scroll-container` 的样式。

我们通过 `ref` 引用获取到这个滚动容器的 DOM 元素，并在 `mounted` 钩子函数中使用 `addEventListener` 方法添加了滚动事件监听器，监听器的回调函数为 `handleScroll`。

在 `handleScroll` 方法中可以处理滚动事件的逻辑，例如输出一个日志。同时，在 `beforeDestroy` 钩子函数中使用 `removeEventListener` 方法移除了滚动事件监听器，避免组件销毁后仍然继续监听滚动事件。