vue上下滚动效果,vue 自动滚动

　　本文主要介绍vue实现消息无缝向上滚动的效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享vue实现消息向上无缝滚动效果的具体代码，供大家参考。具体内容如下

　　代码：

　　ul class= new-list :class= { anim:animate } @ mouseenter= Stop() @ mouseleave= Up()

　　李v-for=通知中的项目

　　.

　　/李

　　/ul

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　通知列表：[]，

　　动画：假，

　　intNum:未定义，

　　}

　　},

　　已创建：函数(){

　　this . getnoticedata()；

　　},

　　方法：{

　　getNoticeData() {

　　这个。$http.get(/news/allList ，{

　　参数：{

　　页码:10，

　　 currentPage: 1

　　}

　　}).然后(res={

　　this . notice list=RES . data . items；

　　这个。scroll up()；

　　});

　　},

　　ScrollUp() {

　　this.intNum=setInterval(()={

　　this.animate=true//向上滚动时需要添加css3过渡动画

　　setTimeout(()={

　　this . notice list . push(this . notice list[0])；//将数组的第一个元素添加到数组的

　　this . notice list . shift()；//删除数组的第一个元素

　　this.animate=false

　　},500)

　　}, 10000);

　　},

　　//向上移动鼠标停止

　　Stop() {

　　clear interval(this . int num)；

　　},

　　Up() {

　　这个。scroll up()；

　　},

　　}

　　}

　　/脚本

　　模式。新列表{

　　行高：28px

　　过渡：前0.5s

　　}。动画{

　　过渡：全0.5s

　　边距-顶部：-28px；//高度等于行高

　　}

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。