vue实现消息向上无缝滚动效果
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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;//高度等于行高
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
