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>