vue 的上下滚动 公告
<template>
<div>
<div class="textBox">
<transition name="slide">
<p class="text" :key="text.id">
<el-tag type="warning">{{text.val.tag}}</el-tag>
{{text.val.title}}</p>
</transition>
</div>
</div>
</template>
<script>
export default {
name: 'scroll',
data () {
return {
textArr: [
{tag:'精彩推荐',title:'1 第一条公告111111111111111'},
{tag:'热门推荐',title:'1 第23条公告嘎嘎嘎嘎嘎嘎灌灌灌灌灌'},
{tag:'精彩推荐',title:'1 第3条公告嘎嘎嘎嘎嘎嘎灌灌灌灌灌'},
{tag:'公司公告',title:'1 第2条公告嘎嘎嘎嘎嘎嘎灌灌灌灌灌'},
{tag:'热门推荐',title:'1 第2333条公告嘎嘎嘎嘎嘎嘎灌灌灌灌灌'},
],
number: 0
}
},
computed: {
text () {
return {
id: this.number,
val: this.textArr[this.number]
}
}
},
mounted () {
this.startMove()
},
methods: {
startMove () {
// eslint-disable-next-line
let timer = setTimeout(() => {
if (this.number === this.textArr.length-1) {
this.number = 0;
} else {
this.number += 1;
}
this.startMove();
}, 2500); // 滚动不需要停顿则将2000改成动画持续时间
}
}
}
</script>
<style scoped>
.textBox {
width: 100%;
height: 40px;
margin: 0 auto;
overflow: hidden;
position: relative;
text-align: center;
}
.text {
width: 100%;
position: absolute;
bottom: 0;
}
.slide-enter-active, .slide-leave-active {
transition: all 0.5s linear;
}
.slide-enter{
transform: translateY(20px) scale(1);
opacity: 1;
}
.slide-leave-to {
transform: translateY(-20px) scale(0.8);
opacity: 0;
}
</style>
