vue实现无限滚动,vue 向上无缝滚动

　　本文介绍了利用vue实现消息无缝滚动的方法，并通过示例代码进行了详细介绍。对大家的学习或者工作都有一定的参考价值，有需要的朋友可以参考一下。

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

JS

　　导出默认值{

　　data() {

　　返回{

　　动画：假，

　　项目：[

　　{姓名：马云 }，

　　{姓名：雷军 }，

　　{姓名：“秦王”}

　　]

　　}

　　},

　　已创建(){

　　setInterval(this.scroll，1000)

　　},

　　方法：{

　　滚动(){

　　this.animate=true//因为消息向上滚动时需要添加css3过渡动画，所以这里需要设置为true

　　SetTimeout(()={ //这里直接用了es6的arrow函数，省去了这个指向偏移量的问题，代码比以前简单很多。

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

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

　　this.animate=false//当margin-top为0时，取消转场动画，实现无缝滚动。

　　},500)

　　}

　　}

CSS

　　#框{

　　宽度：300px

　　高度：32px

　　溢出：隐藏；

　　左填充：30px

　　边框：1px纯黑；

　　}。动画{

　　过渡：全0.5s

　　边距-顶部：-30px；

　　}

　　#con1 li{

　　列表样式：无；

　　行高：30px

　　高度：30px

　　}

HTML

　　div id=box

　　ul id= con 1 ref= con 1 :class= { anim:animate==true }

　　Li v-for= item in items { item . name } }/Li

　　/ul

　　/div

　　关于vue无缝滚动消息的这篇文章到此结束。希望对大家的学习有帮助，也希望大家多多支持。

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