<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;// 因?yàn)樵谙⑾蛏蠞L動(dòng)的時(shí)候需要添加css3過(guò)渡動(dòng)畫，所以這里需要設(shè)置true
?? ??? ??? ?setTimeout(()=>{ ? ?// ?這里直接使用了es6的箭頭函數(shù)，省去了處理this指向偏移問(wèn)題，代碼也比之前簡(jiǎn)化了很多
?? ??? ? ? ? ? ?this.TZGGList.push(this.TZGGList[0]); // 將數(shù)組的第一個(gè)元素添加到數(shù)組的
?? ??? ? ? ? ? ?this.TZGGList.shift(); //刪除數(shù)組的第一個(gè)元素
?? ??? ? ? ? ? ?this.animate = false // margin-top 為0 的時(shí)候取消過(guò)渡動(dòng)畫，實(shí)現(xiàn)無(wú)縫滾動(dòng)
?? ??? ? ? ? ?}, 1000)
?? ??? ?},
?? ??? ?
?? ??? ?//鼠標(biāo)懸停，停止?jié)L動(dòng)
?? ??? ?stopScroll () {
?? ??? ??? ?var target = this.$refs.con1;
?? ??? ??? ?clearInterval(this.timeId)
?? ??? ?},
?? ??? ?
?? ??? ?//鼠標(biāo)移開(kāi) ，接著滾動(dòng)
?? ??? ?startScroll () {
?? ??? ??? ?var target = this.$refs.con1;
?? ??? ??? ?this.timeId = setInterval(this.scroll,1500); ?// 設(shè)置滑動(dòng)速度
?? ??? ?},
?? ?},
?? ?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>