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); // 停留一段时间后来执行这个动画
