<template>
<div class="marquee" @mouseenter="enterMar()" @mouseleave="leaveMar()">
<div :class="{ 'marquee-up': isUp }">
<p class="marquee-text" v-for="(item, index) in dataList" :key="index">
{{ item }}
</p>
</div>
</div>
</template>
<script>export default {
data() {
return {
isUp: false,
dataList: [
11111111111,
22222222222,
33333333333,
44444444444,
55555555555,
],
timer: null,
};
},
mounted() {
this.timer = setInterval(this.scrollAnimate, 3000);
},
methods: {
scrollAnimate() {
this.isUp = true;
setTimeout(() => {
this.dataList.push(this.dataList[0]);
this.dataList.shift();
this.isUp = false;
}, 500);
},
enterMar() {
clearInterval(this.timer);
},
leaveMar() {
this.timer = setInterval(this.scrollAnimate, 3000);
},
},
destroyed() {
clearInterval(this.timer);
},
};</script>
<style lang="less" scoped>.marquee {
height: 120px;
text-align: center;
overflow: hidden;
&-up {
transition: all 0.5s;
transform: translateY(-40px);
}
&-text {
line-height: 40px;
}
}</style>
