Vue如何實現列表跑馬燈效果

這篇文章主要介紹了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如何實現列表跑馬燈效果”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。