本篇文章主要介绍了vue实现消息的无缝滚动效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
朋友的项目里要实现一个消息无缝滚动的效果，中途遇到了一点小bug,每组消息滚动完再次循环时会出现停留两倍的时间间隔问题，我研究了一天终于解决了这个1S的小问题
项目环境vue-cli ，请自行配置好相应的，环境及路由，这里主要介绍实现的方法
第一步在模板中 使用v-for方法循环出消息列表
<template>
<p id="box">
<ul id="con1" ref="con1" :class="{anim:animate==true}">
<li v-for='item in items'>{{item.name}}</li>
</ul>
</p>
</template>第二步在
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
