vue實(shí)現(xiàn)消息無縫滾動效果
更新時間：2022年06月28日 10:15:22 作者：小旭2021
這篇文章介紹了vue實(shí)現(xiàn)消息無縫滾動效果的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)消息無縫滾動效果的具體代碼，供大家參考，具體內(nèi)容如下
JS
export default {
data() {
return {
animate:false,
items:[
{name:"馬云"},
{name:"雷軍"},
{name:"王勤"}
]
}
},
created(){
setInterval(this.scroll,1000)
},
methods: {
scroll(){
this.animate=true; // 因?yàn)樵谙⑾蛏蠞L動的時候需要添加css3過渡動畫，所以這里需要設(shè)置true
setTimeout(()=>{ // 這里直接使用了es6的箭頭函數(shù)，省去了處理this指向偏移問題，代碼也比之前簡化了很多
this.items.push(this.items[0]); // 將數(shù)組的第一個元素添加到數(shù)組的
this.items.shift(); //刪除數(shù)組的第一個元素
this.animate=false; // margin-top 為0 的時候取消過渡動畫，實(shí)現(xiàn)無縫滾動
},500)
}
}CSS
#box{
width: 300px;
height: 32px;
overflow: hidden;
padding-left: 30px;
border: 1px solid black;
}
.anim{
transition: all 0.5s;
margin-top: -30px;
}
#con1 li{
list-style: none;
line-height: 30px;
height: 30px;
}HTML
<div id="box">
<ul id="con1" ref="con1" :class="{anim:animate==true}">
<li v-for='item in items'>{{item.name}}</li>
</ul>
</div>到此這篇關(guān)于vue實(shí)現(xiàn)消息無縫滾動效果的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue:axios請求本地json路徑錯誤問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue?@click?@tap重疊事件區(qū)分方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Pinia是Vue的一個存儲庫,它允許你跨組件/頁面共享狀態(tài),下面這篇文章主要給大家介紹了關(guān)于vue3+pinia的快速入門使用,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue3與elementui封裝一個便捷Loading，，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
解決在Vue中使用axios用form表單出現(xiàn)的問題
今天小編就為大家分享一篇解決在Vue中使用axios用form表單出現(xiàn)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
一篇文章告訴你Vue3指令是如何實(shí)現(xiàn)的
在計算機(jī)技術(shù)中,指令是由指令集架構(gòu)定義的單個的CPU操作,在更廣泛的意義上,“指令”可以是任何可執(zhí)行程序的元素的表述,例如字節(jié)碼,下面這篇文章主要給大家介紹了關(guān)于Vue3指令是如何實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2022-01-01
vue實(shí)現(xiàn)分環(huán)境打包步驟(給不同的環(huán)境配置相對應(yīng)的打包命令)
這篇文章主要介紹了vue實(shí)現(xiàn)分環(huán)境打包步驟(給不同的環(huán)境配置相對應(yīng)的打包命令)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
本篇文章主要介紹了vue-resouce設(shè)置請求頭的三種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了如何抽象一個Vue公共組件，以一個數(shù)字鍵盤組件為例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了在vue里使用codemirror遇到問題，本文給大家記錄下來了,需要的朋友可以參考下2018-11-11