实现页面“公告”上下轮播

Vue实现实现页面公告轮播

1. 首先写一个div块，同时样式也附加上。如图所示。

image.png

<!-- html -->
<div class="marquee_box">
    <!-- 小喇叭图标 -->
    <img class="public" src="public.png" alt=""> 
    <!-- 公告循环展示 -->
    <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. 首先公告上下轮播实现的机制：

先实现一个动画，让公告向上滚动30px。这个动画首先想到的是transition（过渡）属性来实现。第一个动画实现之后，要停留一点时间，再进行下一次的重复动画。

// transition（过渡）实现的动画效果
.marquee_top {
  transition: all 0.5s;
  margin-top: -30px
}

那如何实现这个动画呢，只要在ul元素上加上这个class类就实现了

<!-- html -->
<div class="marquee_box">
    <!-- 小喇叭图标 -->
    <img class="public" src="public.png" alt=""> 
    <!-- 公告循环展示 -->
    <ul class="marquee_list marquee_top">
        <li v-for="(item, index) in marqueeList" :key="index">{{item}}</li>
    </ul>
</div>

但是如果直接加上这个class类后，ul元素只是想上滑动了30px，第二个li元素展示在公告栏中，第一行向上隐藏了。如果想要有连续的滚动的效果，只能使用setInterval来实现了

<!-- html -->
<div class="marquee_box">
    <!-- 小喇叭图标 -->
    <img class="public" src="public.png" alt=""> 
    <!-- 公告循环展示 -->
    <ul class="marquee_list" :class="{marquee_top:animate}">
        <li v-for="(item, index) in marqueeList" :key="index">{{item}}</li>
    </ul>
</div>

// js
setInterval(() => {
   // 开始执行动画，500ms后关闭动画，停留（5s - 500ms）的时间，再执行下一次的动画（animate这个变量控制动画执行还是不执行）
  this.animate = true;
  setTimeout(()=>{
      // 动画开始执行同时，需要处理公告数组中的数据，将执行完动画的元素将其从数组的第一位放到最后一位，实现公告的循环轮播。
      this.marqueeList.push(this.marqueeList[0]);
      this.marqueeList.shift();
      this.animate = false;
   }, 500)
}, 5000); // 停留一段时间后来执行这个动画

后续：实现图片的轮播也是同样的道理，看完这篇文章可以试着自己封装一个图片轮播的效果。