vue 文字无缝滚动_vue实现消息的无缝滚动效果的示例代码

朋友的项目里要实现一个消息无缝滚动的效果，中途遇到了一点小bug,每组消息滚动完再次循环时会出现停留两倍的时间间隔问题，我研究了一天终于解决了这个1S的小问题

项目环境vue-cli ，请自行配置好相应的，环境及路由，这里主要介绍实现的方法

第一步在模板中 使用v-for方法循环出消息列表

• {{item.name}}

第二步在

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)

}

}

}

*{

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;

}

以上就是这篇文章的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。