快捷導(dǎo)航

vue 實(shí)現(xiàn)走馬燈效果

更新時(shí)間：2019年10月28日 11:10:53 作者：涼介,

這篇文章主要介紹了vue 實(shí)現(xiàn)走馬燈效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

Part.1 問(wèn)題

在寫一個(gè)H5頁(yè)面時(shí)遇到一個(gè)需求，頭部公告需要滾動(dòng)變換，需要實(shí)現(xiàn)一個(gè)走馬燈效果

Part.2 實(shí)現(xiàn)

我的做法：利用定時(shí)器 + CSS3 變換公告數(shù)組的順序從而實(shí)現(xiàn)走馬燈效果

Part.3 代碼

HTML

<template>
 <div class="home">
  <div class="home-box">
   <div style="background: #fdfbde">
    <div class="marquee">
     <div class="marquee_box">
      <ul class="marquee_list" :class="{marquee_top:animate}">
       <li v-for="(item, index) in announcementArr" :key="index">
        <span>{{item}}</span>
       </li>
      </ul>
     </div>
    </div>
   </div>
  </div>
 </div>
</template>

CSS

<style type="text/css">
.home {
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
}
.home-box {
 width: 200px;
 height: 200px;
}
.marquee {
 width: 100%;
 height: 30px;
 align-items: center;
 color: #3A3A3A;
 background-color: #fdfbde;
 display: flex;
 box-sizing: border-box;
}

.marquee_box {
 display: block;
 position: relative;
 width: 60%;
 height: 30px;
 overflow: hidden;
}

.marquee_list {
 display: block;
 position: absolute;
 top: 0;
 left: 0;
}

.marquee_top {
 transition: all 0.5s;
 margin-top: -30px
}

.marquee_list li {
 height: 30px;
 line-height: 30px;
 font-size: 12px;
 padding-left: 20px;
}

.marquee_list li span {
 padding: 0 2px;
 color: #f1543a;
}
</style>

JS

<script>
export default {
  name: 'Home',
  data() {
    return {
      announcementArr: [],
      animate: false
    }
  },
  mounted() {
    this.addAnnouncement();

    setInterval(this.showMarquee, 2000);
  },
  methods: {
    addAnnouncement: function() {
      this.announcementArr = ['測(cè)試滾動(dòng)001','測(cè)試滾動(dòng)002','測(cè)試滾動(dòng)003','測(cè)試滾動(dòng)004']
    },
    showMarquee: function() {
      this.animate = true;
      setTimeout(() => {
        this.announcementArr.push(this.announcementArr[0]);
        this.announcementArr.shift();
        this.animate = false
      }, 1000)
    }
  }
}
</script>

Part.4 注意點(diǎn)

在 js 中我使用的是 setInterval 中利用 setTimeout 來(lái)調(diào)用方法

方法詳解：

setInterval —— 會(huì)不停的調(diào)用函數(shù)

setTimeout —— 只會(huì)執(zhí)行函數(shù)一次

這么寫的原因：

如果單純的使用 setInterval 會(huì)導(dǎo)致頁(yè)面卡死，原因與JS引擎線程有關(guān)(有興趣的童鞋可以研究一下)，setInterval 不會(huì)清除定時(shí)器隊(duì)列，每次重復(fù)執(zhí)行會(huì)導(dǎo)致定時(shí)器疊加，最終卡死網(wǎng)頁(yè)。而 setTimeout 是自帶清除定時(shí)器的

Part.5 效果