这篇文章主要讲解了“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;//高度等于行高
}
感谢各位的阅读，以上就是“vue怎么实现消息向上无缝滚动效果”的内容了，经过本文的学习后，相信大家对vue怎么实现消息向上无缝滚动效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是云搜网，小编将为大家推送更多相关知识点的文章，欢迎关注！
