<template>
<!-- vue 实现无限向上滚动 -->
<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: "程序员-陈*" },
{ name: "程序员-李*" },
{ name: "程序员-王*" },
{ name: "程序员-赵*" },
{ name: "程序员-高*" },
{ name: "程序员-要*" },
{ name: "程序员-刘*" },
],
};
},
mounted() {
this.timer1 = setInterval(this.scroll, 1000); //setInterval定时器,当页面加载完执行定时器
},
methods: {
scroll() {
//建一个方法
let con1 = this.$refs.con1;
con1.style.marginTop = "-30px"; //设置style样式 向上移动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"; //设置style样式 向上移动30px 再回到原位
that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象,此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
}, 500);
},
mEnter() {
clearInterval(this.timer1); //鼠标移入清除定时器
},
mLeave() {
this.timer1 = setInterval(this.scroll, 1000); //鼠标离开启动定时器,执行 scroll
},
},
};
</script>
<style scoped>
* {
margin: 0;
padding: 0;
}
#box {
margin: 0 auto;
width: 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>
版权声明:本文为DGL_CSDN原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。