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

<script>
?? ?export default{
?? ?data:function(){
?? ??? ?return {
?? ??? ??? ?timeId:null,
?? ??? ??? ?// 跑馬燈
?? ??? ??? ?animate:false,
?? ??? ?};
?? ?},
?? ?filters: {},
?? ?methods:{
?? ??? ?// 跑馬燈
?? ??? ?scroll(){
?? ??? ??? ?this.animate =true;// 因為在消息向上滾動的時候需要添加css3過渡動畫，所以這里需要設置true
?? ??? ??? ?setTimeout(()=>{ ? ?// ?這里直接使用了es6的箭頭函數(shù)，省去了處理this指向偏移問題，代碼也比之前簡化了很多
?? ??? ? ? ? ? ?this.TZGGList.push(this.TZGGList[0]); // 將數(shù)組的第一個元素添加到數(shù)組的
?? ??? ? ? ? ? ?this.TZGGList.shift(); //刪除數(shù)組的第一個元素
?? ??? ? ? ? ? ?this.animate = false // margin-top 為0 的時候取消過渡動畫，實現(xiàn)無縫滾動
?? ??? ? ? ? ?}, 1000)
?? ??? ?},
?? ??? ?
?? ??? ?//鼠標懸停，停止?jié)L動
?? ??? ?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>

/*跑馬燈*/
<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>