Vue 跑马灯滚动结束事件及重新播放 - 自定义指令实现

Vue 跑马灯组件本身并没有提供滚动结束事件和重新播放的功能，但你可以通过自定义指令和监听 scroll 事件来实现这些功能。

首先，你可以创建一个自定义指令来监听元素滚动到底部的事件：

// main.js
import Vue from 'vue'

Vue.directive('scroll-end', {
  inserted: function(el, binding) {
    el.addEventListener('scroll', function() {
      if (el.scrollTop + el.clientHeight >= el.scrollHeight) {
        binding.value()
      }
    })
  }
})

然后，在你的 Marquee 组件中使用这个指令，并在滚动到底部时触发一个方法：

<!-- Marquee.vue -->
<template>
  <div class='marquee' v-scroll-end='handleScrollEnd'>
    <!-- content goes here -->
  </div>
</template>

<script>
export default {
  methods: {
    handleScrollEnd() {
      // 滚动到底部时执行的代码
      // 重新播放滚动动画的逻辑
    }
  }
}
</script>

<style scoped>
.marquee {
  /* style for marquee container */
}
</style>

在 `handleScrollEnd` 方法中，你可以编写重新播放滚动动画的逻辑，例如将滚动位置重置为 0，重新开始滚动。

请注意，以上代码只是一个示例，具体实现方式取决于你所使用的滚动效果库或自定义滚动逻辑。