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标签的内容不变，可能是因为浏览器版本过高，可更换浏览器或降低浏览器版本试试

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。