在vue中如何实现消息的无缝滚动效果
程序员文章站
2022-03-14 18:20:44
...
本篇文章主要介绍了vue实现消息的无缝滚动效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
朋友的项目里要实现一个消息无缝滚动的效果,中途遇到了一点小bug,每组消息滚动完再次循环时会出现停留两倍的时间间隔问题,我研究了一天终于解决了这个1S的小问题
项目环境vue-cli ,请自行配置好相应的,环境及路由,这里主要介绍实现的方法
第一步在模板中 使用v-for方法循环出消息列表
<template> <p id="box"> <ul id="con1" ref="con1" :class="{anim:animate==true}"> <li v-for='item in items'>{{item.name}}</li> </ul> </p> </template>
第二步在<script>标签中放置消息数组和具体的method 方法。
<script> export default { data() { return { animate:false, items:[ //消息列表对应的数组 {name:"马云"}, {name:"雷军"}, {name:"王勤"} ] } }, created(){ setInterval(this.scroll,1000) // 在钩子函数中调用我在method 里面写的scroll()方法,注意此处不要忘记加this,我在这个位置掉了好几次坑,都是因为忘记写this。 }, 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) } } } </script> <style> *{ margin: 0 ; padding: 0; } #box{ width: 300px; height: 32px; line-height: 30px; overflow: hidden; padding-left: 30px; border: 1px solid black; transition: all 0.5s; } .anim{ transition: all 0.5s; } #con1 li{ list-style: none; line-height: 30px; height: 30px; } </style>
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
以上就是在vue中如何实现消息的无缝滚动效果的详细内容,更多请关注其它相关文章!