vue3-seamless-scroll 监听滚动事件

vue3-seamless-scroll是一个基于Vue3的无缝滚动组件库，可以用于创建无限滚动、轮播等效果的滚动视图。如果您想监听vue3-seamless-scroll的滚动事件，可以通过以下步骤实现：

1. 在组件中引入vue3-seamless-scroll，并添加需要滚动的内容和相关配置：

<template>
  <div class="scroll">
    <vue3-seamless-scroll :options="options">
      <ul>
        <li v-for="(item, index) in list" :key="index">{{ item }}</li>
      </ul>
    </vue3-seamless-scroll>
  </div>
</template>

<script>
import Vue3SeamlessScroll from 'vue3-seamless-scroll'

export default {
  components: {
    Vue3SeamlessScroll
  },
  data() {
    return {
      list: ['item1', 'item2', 'item3'],
      options: {
        step: 1,
        limitMoveNum: 1,
        direction: 'horizontal'
      }
    }
  }
}
</script>

2. 在组件中使用ref来获取vue3-seamless-scroll组件的实例，并在mounted生命周期中注册滚动事件监听器：

<template>
  <div class="scroll">
    <vue3-seamless-scroll ref="scroll" :options="options">
      <ul>
        <li v-for="(item, index) in list" :key="index">{{ item }}</li>
      </ul>
    </vue3-seamless-scroll>
  </div>
</template>

<script>
import Vue3SeamlessScroll from 'vue3-seamless-scroll'

export default {
  components: {
    Vue3SeamlessScroll
  },
  data() {
    return {
      list: ['item1', 'item2', 'item3'],
      options: {
        step: 1,
        limitMoveNum: 1,
        direction: 'horizontal'
      }
    }
  },
  mounted() {
    const scroll = this.$refs.scroll.$refs.scroll
    scroll.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      console.log('scrolling...')
    }
  }
}
</script>

在上述代码中，我们使用$refs来获取vue3-seamless-scroll组件的实例，并使用addEventListener方法在mounted生命周期中注册了滚动事件监听器handleScroll。