这篇文章主要介绍了Vue如何实现列表跑马灯效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue如何实现列表跑马灯效果文章都会有所收获，下面我们一起来看看吧。
Vue文件中：
计算
安全
数据库
网络和加速
企业服务
<ul class="GZDT_list clearfix active" @mouseover="stopScroll" @mouseout="startScroll">
<li v-for ="item in gzdtList" >
<a :href="item.url" rel="external nofollow" target="_blank" :title="item.title" >
<span class="GZDTtitle">
{{item.title | ellipsis}}
</span>
</a>
<span class="right date">{{item.date}}</span>
</li>
</ul>js：
<script>
export default{
data:function(){
return {
timeId:null,
// 跑马灯
animate:false,
};
},
filters: {},
methods:{
// 跑马灯
scroll(){
this.animate =true;// 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
setTimeout(()=>{ // 这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
this.TZGGList.push(this.TZGGList[0]); // 将数组的第一个元素添加到数组的
this.TZGGList.shift(); //删除数组的第一个元素
this.animate = false // margin-top 为0 的时候取消过渡动画，实现无缝滚动
}, 1000)
},
//鼠标悬停，停止滚动
stopScroll () {
var target = this.$refs.con1;
clearInterval(this.timeId)
},
//鼠标移开 ，接着滚动
startScroll () {
var target = this.$refs.con1;
this.timeId = setInterval(this.scroll,1500); // 设置滑动速度
},
},
mounted: function() {
this.init();
this.timeId=setInterval(this.scroll,1500);
},
}
</script>css：
/*跑马灯*/
<style>
#box{
height: 238px;
overflow: hidden;
border: 1px solid #ffffff;
margin-top: 0px;
}
.anim{
transition: all 2s;
}
#con1 li{
list-style: none;
line-height: 35px;
height: 35px;
}
</style>运行过程中发现走马灯title可以滚动改变但是对应的span标签的内容不变，可能是因为浏览器版本过高，可更换浏览器或降低浏览器版本试试
关于“Vue如何实现列表跑马灯效果”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue如何实现列表跑马灯效果”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
