vue实现消息向上无缝滚动效果
作者：conglvse
这篇文章主要为大家详细介绍了vue实现消息向上无缝滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现消息向上无缝滚动效果的具体代码，供大家参考，具体内容如下
代码：
<ul class="new-list" :class="{anim:animate}" @mouseenter="Stop()" @mouseleave="Up()">
<li v-for="item in noticeList">
...
</li>
</ul><script>
export default {
data() {
return {
noticeList: [],
animate:false,
intNum: undefined,
}
},
created: function () {
this.getNoticeData();
},
methods: {
getNoticeData() {
this.$http.get('/news/allList', {
params: {
'pageNumber': 10,
'currentPage': 1
}
}).then(res => {
this.noticeList = res.data.items;
this.ScrollUp();
});
},
ScrollUp() {
this.intNum = setInterval(() => {
this.animate=true;// 向上滚动的时候需要添加css3过渡动画
setTimeout(()=>{
this.noticeList.push(this.noticeList[0]);// 将数组的第一个元素添加到数组的
this.noticeList.shift(); //删除数组的第一个元素
this.animate=false;
},500)
}, 10000);
},
//鼠标移上去停止
Stop() {
clearInterval(this.intNum);
},
Up() {
this.ScrollUp();
},
}
}
</script>样式
.new-list{
line-height: 28px;
transition: top 0.5s;
}
.anim{
transition: all 0.5s;
margin-top: -28px;//高度等于行高
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。