<template>
<div class="djs-box">
<div class="topBox">
<h3>vue实现文字向上滚动效果</h3>
<div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div>
</div>
<div class="dajianshi">
<li v-for="item in list" ref="rollul" :class="{anim:animate==true}">
{{item.vname}} - {{item.vtime}} - {{item.pvname}}
</li>
</div>
</div>
</template>
<script>
export default {
data() {
return {
time:[],
animate: true,
list: [
{ "vname": "大剑师1", "pvname": "PIC-----1", "vtime": "2024.05.12 11:12:23" },
{ "vname": "大剑师2", "pvname": "PIC-----2", "vtime": "2024.05.12 11:12:23" },
{ "vname": "大剑师3", "pvname": "PIC-----3", "vtime": "2024.05.12 11:12:23" },
{ "vname": "大剑师4", "pvname": "PIC-----4", "vtime": "2024.05.12 11:12:23" },
{ "vname": "大剑师5", "pvname": "PIC-----5", "vtime": "2024.05.12 11:12:23" },
{ "vname": "大剑师6", "pvname": "PIC-----6", "vtime": "2024.05.12 11:12:23" },
{ "vname": "大剑师7", "pvname": "PIC-----7", "vtime": "2024.05.12 11:12:23" },
{ "vname": "大剑师8", "pvname": "PIC-----8", "vtime": "2024.05.12 11:12:23" },
{ "vname": "大剑师9", "pvname": "PIC-----9", "vtime": "2024.05.12 11:12:23" },
]
}
},
mounted() {
const timer = setInterval(this.goscroll,1000);
// 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);})
},
methods: {
goscroll() {
let con1 = this.$refs.rollul;
con1[0].style.marginTop = '30px';
this.animate = !this.animate;
var that = this; // 在异步函数中会出现this的偏移问题,此处一定要先保存好this的指向
setTimeout(function() {
that.list.push(that.list[0]);
that.list.shift();
con1[0].style.marginTop = '0px';
that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象,此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
}, 0)
}
}
}
</script>
<style scoped>
.djs-box {
width: 1000px;
height: 650px;
margin: 50px auto;
border: 1px solid black;
}
.topBox {
margin: 0 auto 0px;
padding: 10px 0 20px;
background: black;
color: #fff;
}
.dajianshi {
width: 98%;
margin: 0 auto;
height: 520px;
padding-top:150px;
background-color: cde;
position: relative;
}
.dajianshi li {height: 30px; line-height: 30px; font-size: 20px; list-style: none; }
.anim {transition: all 0.5s; }
</style>
![](https://img2024.cnblogs.com/blog/2523048/202408/2523048-20240807163826453-956084715.gif)