vue 滚动公告
<!-- 滚动公告 --><div class="textArr">
<p class="slice-enter-active" :style=" {color:text.color}" :key="text.id">
{{text.value}}</p>
</div>
data() {return {
scroll: { //滚动公告
number: 0,
textArr: [{
value:'1.地图中玫瑰红图标表示用户当前选择的印章',
color:'#D4237A',
},{
value:'2.地图中绿色图标表示印章在线状态',
color:'#67C23A',
},{
value:'3.地图中红色图标表示印章离线状态',
color:'red',
},{
value:'4.如果选择印章无定位信息,地图将显示空白',
color:'red',
}]
}
};
},
computed: {
text() {
return {
id: this.scroll.number,
value: this.scroll.textArr[this.scroll.number].value,
color:this.scroll.textArr[this.scroll.number].color,
}
}
},
mounted() {
//滚动公告
this.startMove()
},
methods: {
//滚动公告
startMove() {
// eslint-disable-next-line
let timer = setInterval(() => {
if (this.scroll.number === this.scroll.textArr.length-1) {
this.scroll.number = 0;
} else {
this.scroll.number += 1;
}
}, 5000); // 滚动不需要停顿则将2000改成动画持续时间
},
}
.textArr{//滚动公告
position: absolute;right: 220px;z-index: 11;width:400px;height: 40px;line-height: 40px;overflow: hidden;text-align:center;
.slice-enter-active {
animation: bounce-in 5s infinite;
}
}
@keyframes bounce-in {
0% {
transform:translateY(30px) ;
}
20% {
transform: translateY(0px);
}
80% {
transform: translateY(0px);
}
100% {
transform:translateY(-30px);
}
}
以上是 vue 滚动公告 的全部内容, 来源链接: utcz.com/z/374678.html