VUE 滚动公告

VUE 实现滚动公告思路： 
1. 固定显示区域的高度，超出隐藏， 
2. 绝对定位，使用transition过渡效果改变top值设置为显示区域高度的倍数， 
3. 必不可少的定时器setInterval设置每条信息显示多长时间 
4. v-for循环出要显示的信息 
5. v-bind:class绑定过渡效果的类名，当最后一条信息跳转到第一条信息的时候去掉过渡效果的类名 
先上效果图 

HTML部分

<div class="vueBox" >
    <div class="marquee">
        <div class="marquee_title">
            <span>最新战报</span>
        </div>
        <div class="marquee_box">
            <ul class="marquee_list" :style="{ top: -num + 'px'}" :class="{marquee_top:num}">
            <!-- 当显示最后一条的时候（num=0转换布尔类型为false）去掉过渡效果-->
                <li v-for="(item, index) in marqueeList" >
                    <span>{{item.name}}</span>
                    <span>在</span>
                    <span class="red"> {{item.city}}</span>
                    <span>杀敌</span>
                    <span class="red"> {{item.amount}}</span>
                    <span>万</span>
                </li>
            </ul>
        </div>
    </div>
</div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

JS部分

<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: ".vueBox",
        data: {
            num:0,
            marqueeList: [
                {
                    name:'1军',
                    city:'北京',
                    amount:'10'
                },
                {
                    name:'2军',
                    city:'上海',
                    amount:'20'
                },
                {
                    name:'3军',
                    city:'广州',
                    amount:'30'
                },
                {
                    name:'4军',
                    city:'重庆',
                    amount:'40'
                }
            ]
        },
        created: function () {
            this.showMarquee(this.num)
        },
        methods: {
            showMarquee:function (num) {
                this.marqueeList.push(this.marqueeList[0]);
                var max = this.marqueeList.length;
                var that = this;
                marqueetimer =  setInterval(function(){
                    num++;
                    if(num>=max ){
                        num=0;
                    }
                    that.num=num*30;
                }, 2000);
            }
        }
    });
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49

CSS部分

 <style>
        div,ul,li,span,img{
            margin:0;
            padding:0;
            display: flex;
            box-sizing: border-box;
        }
        .marquee{
            width: 100%;
            height: 50px;
            align-items: center;
            color: #3A3A3A;
            background-color: aqua;
            display: flex;
            box-sizing: border-box;
        }
        .marquee_title{
            padding: 0 20px;
            height: 30px;/*关键样式*/
            font-size: 14px;
            border-right: 1px solid #d8d8d8;
            align-items: center;
        }

        .marquee_box{
            display: block;
            position: relative;
            width: 60%;
            height: 30px;/*关键样式*/
            overflow: hidden;
        }
        .marquee_list{
            display: block;
            position: absolute;
            top:0;
            left: 0;
        }
        .marquee_top{transition: top 0.5s ;}/*关键样式*/
        .marquee_list li{
            height: 30px;/*关键样式*/
            line-height: 30px;/*关键样式*/
            font-size: 14px;
            padding-left: 20px;
            background-color: #fff;
        }
        .marquee_list li span{
            padding:0 2px;
        }
        .red{
            color: #FF0101;
        }
    </style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52

这种方式有个BUG，就是最后一条跳转到第一条的时候，第一条显示的时间是两倍时间，因为显示的两次

后来小伙伴提供了另外一种方式 
vue实现消息的无缝滚动效果（完善版）