vue實(shí)現(xiàn)消息無縫滾動(dòng)效果
更新時(shí)間：2022年06月28日 10:15:22 作者：小旭2021
這篇文章介紹了vue實(shí)現(xiàn)消息無縫滾動(dòng)效果的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)消息無縫滾動(dòng)效果的具體代碼，供大家參考，具體內(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動(dòng)的時(shí)候需要添加css3過渡動(dòng)畫，所以這里需要設(shè)置true
setTimeout(()=>{ // 這里直接使用了es6的箭頭函數(shù)，省去了處理this指向偏移問題，代碼也比之前簡(jiǎn)化了很多
this.items.push(this.items[0]); // 將數(shù)組的第一個(gè)元素添加到數(shù)組的
this.items.shift(); //刪除數(shù)組的第一個(gè)元素
this.animate=false; // margin-top 為0 的時(shí)候取消過渡動(dòng)畫，實(shí)現(xiàn)無縫滾動(dòng)
},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)消息無縫滾動(dòng)效果的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
VUE v-model表單數(shù)據(jù)雙向綁定完整示例
這篇文章主要介紹了VUE v-model表單數(shù)據(jù)雙向綁定,結(jié)合完整實(shí)例形式分析了vue.js實(shí)現(xiàn)表單數(shù)據(jù)雙向綁定相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
Vue優(yōu)化:常見會(huì)導(dǎo)致內(nèi)存泄漏問題及優(yōu)化詳解
這篇文章主要介紹了Vue優(yōu)化:常見會(huì)導(dǎo)致內(nèi)存泄漏問題及優(yōu)化詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue動(dòng)態(tài)控制input的disabled屬性的方法
這篇文章主要介紹了Vue動(dòng)態(tài)控制input的disabled屬性的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
Vue手機(jī)號(hào)正則匹配姓名加密展示功能的實(shí)現(xiàn)
這篇文章主要介紹了Vue手機(jī)號(hào)正則匹配，姓名加密展示,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
FileSaver.js?是在客戶端保存文件的解決方案，非常適合?在客戶端上生成文件的?Web?應(yīng)用，它是?HTML5?版本的?saveAs()?FileSaver?實(shí)現(xiàn)，這篇文章主要介紹了vue用FileSaverJs導(dǎo)出文件,需要的朋友可以參考下2023-09-09
Vue 父子組件實(shí)現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式(案例代碼)
本文給大家分享Vue 父子組件實(shí)現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式，方式一是通過監(jiān)聽事件實(shí)現(xiàn)方式二是通過 v-model 實(shí)現(xiàn)，每種方式結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-11-11
vue 導(dǎo)航內(nèi)容設(shè)置選中狀態(tài)樣式的例子
今天小編就為大家分享一篇vue 導(dǎo)航內(nèi)容設(shè)置選中狀態(tài)樣式的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
詳解.vue文件中style標(biāo)簽的幾個(gè)標(biāo)識(shí)符
這篇文章主要介紹了詳解.vue文件中style標(biāo)簽的幾個(gè)標(biāo)識(shí)符，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
Vue+WebSocket頁面實(shí)時(shí)刷新長(zhǎng)連接的實(shí)現(xiàn)
最近vue項(xiàng)目要做數(shù)據(jù)實(shí)時(shí)刷新，數(shù)據(jù)較大，會(huì)出現(xiàn)卡死情況，所以本文主要介紹了頁面實(shí)時(shí)刷新長(zhǎng)連接，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
本篇文章主要介紹了vue模擬加載更多功能（數(shù)據(jù)追加），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06