<template>
<div id="box">
<div
id="con1"
ref="con1"
:class="{anim:animate==true}"
@mouseenter="mEnter"
@mouseleave="mLeave"
>
<p v-for="(item,index) in items" :key="index">中奖人的名字是--{{item.name}}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
animate: false,
items: [
//消息列表对应的数组
{ name: "Kobe Bean Bryant" },
{ name: "Kyrie Irving" },
{ name: "Dwyane Wade" },
{ name: "Pau Gasol" },
{ name: "Dwight Howard" },
{ name: "DeMarcus Cousins" },
{ name: "Kevin Durant" }
]
};
},
mounted() {
this.timer1 = setInterval(this.scroll, 1000);
},
methods: {
scroll() {
let con1 = this.$refs.con1;
con1.style.marginTop = "-30px";
this.animate = !this.animate;
var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
setTimeout(function() {
that.items.push(that.items[0]);
that.items.shift();
con1.style.marginTop = "0px";
that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
}, 500);
},
mEnter() {
clearInterval(this.timer1);
},
mLeave() {
this.timer1 = setInterval(this.scroll, 1000);
}
}
};
</script>
<style scoped>
* {
margin: 0;
padding: 0;
}
#box {
300px;
height: 175px;
line-height: 30px;
overflow: hidden;
padding-left: 30px;
border: 1px solid #ffffff;
transition: all 0.5s;
}
.anim {
transition: all 0.5s;
}
#con1 li {
list-style: none;
line-height: 30px;
height: 30px;
}
</style>
当我们鼠标在上边时停止，离开继续滚动
