vue實(shí)現(xiàn)廣告欄上下滾動(dòng)效果
更新時(shí)間：2020年11月26日 09:03:54 作者：a 入畫淺相思
這篇文章主要介紹了vue實(shí)現(xiàn)廣告欄上下滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)廣告欄上下滾動(dòng)效果的具體代碼，供大家參考，具體內(nèi)容如下
html部分
<div class="roll">
<img src="xxx.jpg" alt />
<ul :class="{marquee_top:animate}">
<li v-for="(item, index) in msg" :key="index">
<span class="txtWrap">
<span class="txt">{{item.name}}搶得商品{{item.goods}}</span>
<span class="txt">已有123人申請(qǐng)</span>
</span>
</li>
</ul>
</div>
js部分
data () {
return {
msg: [
{
name: '張**',
goods: '牙膏'
},
{
name: '王**',
goods: '牙刷'
},
{
name: '鐘**',
goods: '肥皂'
}
],
animate: false,
setInTime:'' // 定時(shí)器
}
},
mounted:{
this.setInTime = setInterval(this.showMarquee, 3000)
},
destroyed () {
clearInterval(this.setInTime) // 頁(yè)面銷毀時(shí)清除定時(shí)器
},
methods:{
// 滾動(dòng)欄滾動(dòng)
showMarquee () {
this.animate = true
setTimeout(() => {
this.msg.push(this.msg[0])
this.msg.shift()
this.animate = false
}, 500)
},
}
關(guān)鍵css部分
.marquee_top {
transition: all 0.5s;
margin-top: -26px; /* 容器高度 */
}
效果：
（圖中有個(gè)地方直接改變內(nèi)容的為gif圖片首尾相接部分）
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue表單雙綁和組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
這篇文章主要為大家詳細(xì)介紹了Vue+ssh框架實(shí)現(xiàn)在線聊天，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
vue實(shí)現(xiàn)播放后端flask發(fā)送的mp3文件
這篇文章主要為大家詳細(xì)介紹了vue如何實(shí)現(xiàn)播放后端flask發(fā)送的mp3文件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
解決vue單頁(yè)面 回退頁(yè)面 keeplive 緩存問題
這篇文章主要介紹了解決vue單頁(yè)面 回退頁(yè)面 keeplive 緩存問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要為大家介紹了vue中 this.$set的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
用VueJS寫一個(gè)Chrome瀏覽器插件的實(shí)現(xiàn)方法
這篇文章主要介紹了用VueJS寫一個(gè)Chrome瀏覽器插件的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
本文主要介紹了淺談Vue灰度發(fā)布新功能的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
詳解Vue自定義指令如何實(shí)現(xiàn)處理圖片加載失敗的碎圖
這篇文章主要介紹了詳解Vue自定義指令如何實(shí)現(xiàn)處理圖片加載失敗的碎圖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了Vue 生命周期的過(guò)程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了vue中this.$confirm的使用及說(shuō)明方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08