Vue如何实现列表跑马灯效果

这篇文章主要介绍了Vue如何实现列表跑马灯效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue如何实现列表跑马灯效果文章都会有所收获，下面我们一起来看看吧。

Vue文件中：

<ul class="GZDT_list clearfix active" @mouseover="stopScroll" @mouseout="startScroll">     <li v-for ="item in gzdtList" >         <a :href="item.url" rel="external nofollow"  target="_blank" :title="item.title" >             <span class="GZDTtitle">                 {{item.title | ellipsis}}             </span>         </a>         <span class="right date">{{item.date}}</span>     </li> </ul>

js：

<script>     export default{     data:function(){         return {             timeId:null,             // 跑马灯             animate:false,         };     },     filters: {},     methods:{         // 跑马灯         scroll(){             this.animate =true;// 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true             setTimeout(()=>{    //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多                 this.TZGGList.push(this.TZGGList[0]); // 将数组的第一个元素添加到数组的                 this.TZGGList.shift(); //删除数组的第一个元素                 this.animate = false // margin-top 为0 的时候取消过渡动画，实现无缝滚动               }, 1000)         },                  //鼠标悬停，停止滚动         stopScroll () {             var target = this.$refs.con1;             clearInterval(this.timeId)         },                  //鼠标移开 ，接着滚动         startScroll () {             var target = this.$refs.con1;             this.timeId = setInterval(this.scroll,1500);  // 设置滑动速度         },     },     mounted: function() {         this.init();         this.timeId=setInterval(this.scroll,1500);     }, } </script>

css：

/*跑马灯*/ <style>     #box{         height: 238px;         overflow: hidden;         border: 1px solid #ffffff;         margin-top: 0px;     }      .anim{         transition: all 2s;     }          #con1 li{         list-style: none;         line-height: 35px;         height: 35px;     } </style>

运行过程中发现走马灯title可以滚动改变但是对应的span标签的内容不变，可能是因为浏览器版本过高，可更换浏览器或降低浏览器版本试试

关于“Vue如何实现列表跑马灯效果”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue如何实现列表跑马灯效果”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。