遍历数组运用 setInterval 来对数组循环
<template>
<div class="gonggao">
<ul class="list">
<li
v-for="(item, index) in yjList"
:key="item.id"
:class="!index && play ? 'toUp' : ''"
style="display: flex"
>
<img src="../../assets/image/warn.png" alt="" />
{
{ item.yjname }} {
{ item.time }}
</li>
</ul>
</div>
</template>
<script>
export default {
mounted() {
setInterval(this.startPlay, 2000);
},
props: {
yjList: {
type: Array,
default: [],
},
},
data() {
return {
ulList: [],
play: false,
};
},
methods: {
startPlay() {
let that = this;
that.play = true; //开始播放
setTimeout(() => {
that.ulList.push(that.ulList[0]); //将第一条数据塞到最后一个
that.ulList.shift(); //删除第一条数据
that.play = false; //暂停播放,此处修改,保证每一次都会有动画显示
}, 500);
},
},
};
</script>
<style scoped>
.gonggao {
position: absolute;
width: 35%;
height: 70px;
top: 80px;
left: 50%;
transform: translate(-50%, 0%);
color: #fff;
border-radius: 5px;
background: url("../../assets/image/gonggao.png") no-repeat;
background-size: 100% 100%;
}
.toUp {
margin-top: -40px;
transition: all 0.5s;
}
.list {
list-style: none;
width: 80%;
text-align: center;
overflow: hidden;
height: 40px;
margin: 21px auto;
font-size: 17px;
}
.list img {
width: 25px;
height: 25px;
margin-top: 12px;
margin-right: 10px;
}
li {
text-align: left;
height: 40px;
line-height: 49px;
font-weight: 600;
}
</style>