Vue实现列表跑马灯效果
作者：luanluan8888
这篇文章主要为大家详细介绍了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标签的内容不变，可能是因为浏览器版本过高，可更换浏览器或降低浏览器版本试试
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。