- N +

vue实现消息的无缝滚动效果

原标题:vue实现消息的无缝滚动效果

导读:

css样式:#box{    width: 300px;    height:...

文章目录 [+]

css样式:

#box{
    width: 300px;
    height: 32px;
    overflow: hidden;
    padding-left: 30px;
    border: 1px solid black;
}
.anim{
    transition: all 0.5s;
    margin-top: -30px;
}
#con1 li{
    list-style: none;
    line-height: 30px;
    height: 30px;
}

HTML代码:

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

js代码:

<script>

    var app = new Vue({
        el: "#app",
        data: {
            animate:false,
             items:[
              {name:"123"},
              {name:"222"},
              {name:"333"}
          ]  
        },
        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)
            }
            // 兼容ie的写法
            scroll:function(){
                this.animate=true;// 因为在消息向上滚动的时候需要添加css3过渡动画,所以这里需要设置true
                var that = this
                setTimeout(function(){
                    that.items.push(that.items[0]) // 将数组的第一个元素添加到数组的
                    that.items.shift();               //删除数组的第一个元素
                    that.animate=false;  // margin-top 为0 的时候取消过渡动画,实现无缝滚动

                },500)
            },
                                      
        },
        created:function() {     
            setInterval(this.scroll,1000)
        },
        mounted:function() {
          
        }
    });

</script>


有好的文章希望我们帮助分享和推广,猛戳这里我要投稿

1

0
返回列表
上一篇:
下一篇:

发表评论中国互联网举报中心

快捷回复:

验证码

    评论列表 (暂无评论,共382人参与)参与讨论

    还没有评论,来说两句吧...