简单实现消息轮播,直接上代码
<template>
<div>
<el-row :gutter="2">
<el-col :span="2">公告</el-col>
<el-col :span="22">
<el-col id="horn-msg">
<div :class="{ anim: isRoll === true }"
v-for="(item, index) in contentData"
:key="index">
{{ item }}
</div>
</el-col>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
isRoll: false,
contentData: [
"新闻1",
"新闻2",
"新闻3",
]
}
},
methods: {
// 消息轮播
scroll () {
this.isRoll = true
setTimeout(() => {
this.contentData.push(this.contentData[0])
this.contentData.shift()
this.isRoll = false
}, 500);
},
},
mounted () {
setInterval(this.scroll, 3000)
},
}
</script>
<style scoped>
.roll {
transition: all 0.5s;
margin-top: -30px;
}
</style>