Vue實(shí)現(xiàn)實(shí)現(xiàn)頁面公告輪播

1. 首先寫一個div塊，同時樣式也附加上。如圖所示。

image.png

<!-- html -->
<div class="marquee_box">
    <!-- 小喇叭圖標(biāo) -->
    <img class="public" src="public.png" alt=""> 
    <!-- 公告循環(huán)展示 -->
    <ul class="marquee_list">
        <li v-for="(item, index) in marqueeList" :key="index">{{item}}</li>
    </ul>
</div>

<!-- css-->
.marquee_box {
  position: relative;
  overflow: hidden;
  width: 312px;
  height: 27px;
  background: rgba(255,254,245, 0.6);
  border-radius: 27px;
  // 小喇叭樣式
  .public {
    position: absolute;
    left: 13px;
    top: 7px;
    width: 17px;
    height: 14px;
  }
  // 
  .marquee_list {
    position: absolute;
    top: 0;
    left: 38px;
    li {
      height: 30px;
      line-height: 27px;
      font-size: 13px;
      color: #ee4f00;
      width: 275px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

2. 首先公告上下輪播實(shí)現(xiàn)的機(jī)制：

先實(shí)現(xiàn)一個動畫，讓公告向上滾動30px。這個動畫首先想到的是transition（過渡）屬性來實(shí)現(xiàn)。第一個動畫實(shí)現(xiàn)之后，要停留一點(diǎn)時間，再進(jìn)行下一次的重復(fù)動畫。

// transition（過渡）實(shí)現(xiàn)的動畫效果
.marquee_top {
  transition: all 0.5s;
  margin-top: -30px
}

那如何實(shí)現(xiàn)這個動畫呢，只要在ul元素上加上這個class類就實(shí)現(xiàn)了

<!-- html -->
<div class="marquee_box">
    <!-- 小喇叭圖標(biāo) -->
    <img class="public" src="public.png" alt=""> 
    <!-- 公告循環(huán)展示 -->
    <ul class="marquee_list marquee_top">
        <li v-for="(item, index) in marqueeList" :key="index">{{item}}</li>
    </ul>
</div>

但是如果直接加上這個class類后，ul元素只是想上滑動了30px，第二個li元素展示在公告欄中，第一行向上隱藏了。如果想要有連續(xù)的滾動的效果，只能使用setInterval來實(shí)現(xiàn)了

<!-- html -->
<div class="marquee_box">
    <!-- 小喇叭圖標(biāo) -->
    <img class="public" src="public.png" alt=""> 
    <!-- 公告循環(huán)展示 -->
    <ul class="marquee_list" :class="{marquee_top:animate}">
        <li v-for="(item, index) in marqueeList" :key="index">{{item}}</li>
    </ul>
</div>

// js
setInterval(() => {
   // 開始執(zhí)行動畫，500ms后關(guān)閉動畫，停留（5s - 500ms）的時間，再執(zhí)行下一次的動畫（animate這個變量控制動畫執(zhí)行還是不執(zhí)行）
  this.animate = true;
  setTimeout(()=>{
      // 動畫開始執(zhí)行同時，需要處理公告數(shù)組中的數(shù)據(jù)，將執(zhí)行完動畫的元素將其從數(shù)組的第一位放到最后一位，實(shí)現(xiàn)公告的循環(huán)輪播。
      this.marqueeList.push(this.marqueeList[0]);
      this.marqueeList.shift();
      this.animate = false;
   }, 500)
}, 5000); // 停留一段時間后來執(zhí)行這個動畫

后續(xù)：實(shí)現(xiàn)圖片的輪播也是同樣的道理，看完這篇文章可以試著自己封裝一個圖片輪播的效果。