vue實(shí)現(xiàn)廣告欄上下滾動效果

更新時間：2020年11月26日 09:03:54 作者：a　入畫淺相思

這篇文章主要介紹了vue實(shí)現(xiàn)廣告欄上下滾動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)廣告欄上下滾動效果的具體代碼，供大家參考，具體內(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人申請</span>
   </span>
  </li>
 </ul>
</div>

js部分

data () {
 return {
 msg: [
    {
     name: '張**',
     goods: '牙膏'
    },
    {
     name: '王**',
     goods: '牙刷'
    },
    {
     name: '鐘**',
     goods: '肥皂'
    }
   ],
  animate: false,
  setInTime:'' // 定時器
 }
 },
mounted:{
 this.setInTime = setInterval(this.showMarquee, 3000)
},
destroyed () {
  clearInterval(this.setInTime) // 頁面銷毀時清除定時器
 },
methods:{
 // 滾動欄滾動
  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; /* 容器高度 */
 }

效果：

（圖中有個地方直接改變內(nèi)容的為gif圖片首尾相接部分）

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
滾動

相關(guān)文章

詳解Vue.js自定義tipOnce指令用法實(shí)例
這篇文章主要介紹了詳解Vue.js自定義tipOnce指令用法實(shí)例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
Vue瀏覽器鏈接與接口參數(shù)實(shí)現(xiàn)加密過程詳解
這篇文章主要介紹了Vue瀏覽器鏈接與接口參數(shù)實(shí)現(xiàn)加密過程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2022-12-12
詳解Vite的新體驗(yàn)
這篇文章主要介紹了詳解Vite的新體驗(yàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02
vue-router安裝和使用詳解
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應(yīng)用,分步驟介紹了安裝和使用vue-router的方法,感興趣的朋友跟隨小編一起看看吧
2023-08-08
從零開始在NPM上發(fā)布一個Vue組件的方法步驟
這篇文章主要介紹了從零開始在NPM上發(fā)布一個Vue組件的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
vue?proxytable代理根路徑的同時增加其他代理方式
這篇文章主要介紹了vue?proxytable代理根路徑的同時增加其他代理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue前端實(shí)現(xiàn)表格數(shù)據(jù)增查改刪功能
增刪改查是我們寫項(xiàng)目百分之七十會遇到的代碼,下面這篇文章主要給大家介紹了關(guān)于vue前端實(shí)現(xiàn)表格數(shù)據(jù)增查改刪功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-05-05
60個vue常用工具類
這篇文章主要介紹了60個vue常用工具類,包括vue郵箱驗(yàn)證，vue瀏覽器識別，vue操作系統(tǒng)識別,vue html過濾，vue身份證校驗(yàn)等需要的朋友可以參考下
2023-01-01
web項(xiàng)目開發(fā)中2個Token原因解析及示例代碼
這篇文章主要介紹了web項(xiàng)目開發(fā)中會出現(xiàn)2個Token原因的解析以及實(shí)現(xiàn)的示例代碼，有需要的同學(xué)可以借鑒參考下，希望可以有所幫助
2021-09-09
vue?路由切換過渡動效滑入滑出效果的實(shí)例代碼
在支付寶賬單頁面有這樣一個特效切換過渡動效滑入滑出效果，非常方便實(shí)用，那么這個功能如何實(shí)現(xiàn)的呢？下面小編通過vue實(shí)現(xiàn)路由切換過渡動效滑入滑出效果，感興趣的朋友一起看看吧
2022-03-03