如何使用vue实现无缝滚动效果

杨新朋| 阅读:59 发表时间:2018-07-27 15:45:04 前端技术

本篇文章主要介绍了vue实现消息的无缝滚动效果的示例代码,个人觉得挺不错的,现在分享给大家,也给大家做个参考。

第一步在模板中 使用v-for方法循环出消息列表

<template>
<div id="box">
  <ul id="con1" ref="con1" :class="{anim:animate==true}">
    <li v-for='item in items'>{{item.name}}</li>
  </ul>
</div>
</template>

第二步在<script>标签中放置消息数组和具体的method 方法。

<script>
export default {
data() {
 return {
   animate:false,
   items:[  //消息列表对应的数组
     {name:"马云"},
     {name:"雷军"},
     {name:"王勤"}
   ]
 }
},
created(){
  setInterval(this.scroll,1000) // 在钩子函数中调用我在method 里面写的scroll()方法,注意此处不要忘记加thiss。
},
methods: {
  scroll:function(){
    let _self=this;
    let con1= _self.$refs.con1;
    con1.style.marginTop='-30px';
    _self.animate=!_self.animate;
    self.animate=true;    // 因为在消息向上滚动的时候需要添加css3过渡动画,所以这里需要设置true
    setTimeout(()=>{      //  这里直接使用了es6的箭头函数,省去了处理this指向偏移问题,代码也比之前简化了很多
	_self.lists.push(_self.lists[0]);  // 将数组的第一个元素添加到数组的
	_self.lists.shift();               //删除数组的第一个元素
	con1.style.marginTop='0px';
	_self.animate=!_self.animate;  // margin-top 为0 的时候取消过渡动画,实现无缝滚动
    },500);

    setTimeout(_self.scroll,1000); 
  }
}
</script>
<style>
*{
  margin: 0 ;
  padding: 0;
}
#box{
  width: 300px;
  height: 32px;
  line-height: 30px;
  overflow: hidden;
  padding-left: 30px;
  border: 1px solid black;
  transition: all 0.5s;
}
.anim{
  transition: all 0.5s;
}
#con1 li{
  list-style: none;
  line-height: 30px;
  height: 30px;
}
</style>
本文由杨新朋发表并编辑,转载此文章须经作者同意,并请附上出处及本页链接。如有侵权,请联系本站删除。