美文网首页
vue做向上无缝滚动信息展示

vue做向上无缝滚动信息展示

作者: 众生皆似尘埃啊 | 来源:发表于2019-08-16 14:36 被阅读0次
    export default {
    data() {
      return {
          animate:false,
          items:[
              {name:"马云"},
              {name:"雷军"},
              {name:"王勤"}
          ]
      }
    },
    created(){
        //定时器
        setInterval(this.scroll,1000)
    },
    methods: {
        scroll(){
           this.animate=true;    // 因为在消息向上滚动的时候需要添加css3过渡动画,所以这里需要设置true
           setTimeout(()=>{      //  这里直接使用了es6的箭头函数,省去了处理this指向偏移问题,代码也比之前简化了很多
                   this.items.push(this.items[0]);  // 将数组的第一个元素添加到数组的
                   this.items.shift();               //删除数组的第一个元素
                   this.animate=false;  // margin-top 为0 的时候取消过渡动画,实现无缝滚动
           },500)
        }
    }
    

    呃....html代码就自己写吧

    相关文章

      网友评论

          本文标题:vue做向上无缝滚动信息展示

          本文链接:https://www.haomeiwen.com/subject/efafsctx.html