VUE 滚动公告

来源：互联网发布：linux多开terminator 编辑：程序博客网时间：2024/05/19 17:04

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>

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>

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>

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

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

阅读全文

0 0