Vue實現(xiàn)實現(xiàn)頁面公告輪播
1. 首先寫一個div塊蜜葱，同時樣式也附加上。如圖所示。
image.png
<!-- html -->
<div class="marquee_box">
<!-- 小喇叭圖標 -->
<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. 首先公告上下輪播實現(xiàn)的機制：
先實現(xiàn)一個動畫露久，讓公告向上滾動30px。這個動畫首先想到的是transition（過渡）屬性來實現(xiàn)欺栗。第一個動畫實現(xiàn)之后毫痕，要停留一點時間征峦，再進行下一次的重復動畫。
// transition（過渡）實現(xiàn)的動畫效果
.marquee_top {
transition: all 0.5s;
margin-top: -30px
}
那如何實現(xiàn)這個動畫呢消请，只要在ul元素上加上這個class類就實現(xiàn)了
<!-- html -->
<div class="marquee_box">
<!-- 小喇叭圖標 -->
<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來實現(xiàn)了
<!-- html -->
<div class="marquee_box">
<!-- 小喇叭圖標 -->
<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ù)組的第一位放到最后一位，實現(xiàn)公告的循環(huán)輪播昭殉。
this.marqueeList.push(this.marqueeList[0]);
this.marqueeList.shift();
this.animate = false;
}, 500)
}, 5000); // 停留一段時間后來執(zhí)行這個動畫
