vue 滚动显示,vue数据滚动效果组件

　　本文主要介绍vue如何上下滚动广告栏。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享vue实现上下滚动广告栏效果的具体代码，供大家参考。具体内容如下

　　Html部分

　　div class=滚

　　img src=xxx.jpg alt /

　　ul:class= { marquee _ top:animate }

　　 li v-for=(item，index) in msg :key=index

　　span class=txtWrap

　　Class= txt {{item.name}}被劫货物{{item.goods}}/span

　　已经有123人申请了

　　/span

　　/李

　　/ul

　　/div

　　Js零件

　　data () {

　　返回{

　　消息：[

　　{

　　姓名：张* * ，

　　商品：“牙膏”

　　},

　　{

　　姓名：王* * ，

　　商品：牙刷

　　},

　　{

　　名称：时钟* * ，

　　商品：“肥皂”

　　}

　　],

　　动画：假，

　　设置时间： //计时器

　　}

　　},

　　已安装：{

　　this . setintime=setInterval(this . show marquee，3000)

　　},

　　销毁(){

　　Clear interval(this . setintime)//在页面被销毁时清除计时器。

　　},

　　方法：{

　　//滚动条滚动

　　showMarquee () {

　　this.animate=true

　　setTimeout(()={

　　this.msg.push(this.msg[0])

　　this.msg.shift()

　　this.animate=false

　　}, 500)

　　},

　　}

　　关键css部件。marquee_top {

　　过渡：全0.5s

　　边距-顶部：-26px；/*集装箱高度*/

　　}

　　效果：

　　(图中有个地方直接为gif图片的首尾部分更改内容)

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

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