vue 滚动公告

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

回到顶部