<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>标签:文字,2024.05,12,滚动,vname,大剑师,vue,pvname,vtime From: https://www.cnblogs.com/j-a-h/p/18347357