vue跑马灯

Vue跑马灯（Rolling Marquee）是一种常见的前端交互效果，可以循环播放一组内容，通常用于展示滚动的新闻标题、广告内容、图片轮播等。

在Vue中实现跑马灯效果，通常可以借助Vue的动画和过渡效果，以及计时器。下面是一种简单的实现方式。

首先，需要定义一个vue组件，其中包含要展示的内容和一些控制跑马灯的参数。比如：

```vue

```

在这个示例中，初始化了一组跑马灯内容`marqueeData`，设置了滚动一次的持续时间`duration`、跑马灯切换的时间间隔`interval`。在组件的`mounted`生命周期钩子中，调用`startMarquee`方法开启跑马灯，会按照`interval`的时间间隔切换到下一个内容；而在`beforeDestroy`生命周期钩子中，调用`stopMarquee`方法停止跑马灯。

`startMarquee`方法中，使用`setInterval`定时器不断调用`next`方法，在该方法中，通过获取跑马灯内容容器的高度、滚动高度以及内容高度来判断是否进行滚动，并根据情况滚动至下一位置。

这里使用了CSS动画`marqueeAnimation`来实现内容滚动的动画效果。通过`@keyframes`关键字定义关键帧动画，从初始位置滚动到下一位置，然后循环播放。

至此，一个简单的Vue跑马灯组件就完成了。您可以尝试修改`marqueeData`数组中的内容，添加或删除项，观察跑马灯的滚动效果。你也可以根据实际需求对组件进行优化和扩展，比如增加点击切换的功能、调整滚动速度、添加动画效果等。