Vue 列表跑马灯

1. .Vue文件中：

<ul class="GZDT_list clearfix active" @mouseover="stopScroll" @mouseout="startScroll">
    <li v-for ="item in gzdtList" >
		<a :href="item.url" target="_blank" :title="item.title" >
			<span class="GZDTtitle">
				{{item.title | ellipsis}}
			</span>
		</a>
		<span class="right date">{{item.date}}</span>
    </li>
</ul>

2. 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>

3. 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标签的内容不变，可能是因为浏览器版本过高，可更换浏览器或降低浏览器版本试试