vue垂直滚动文字公告效果

想做一个垂直滚动的公告栏效果，网上找了好久才找到一个靠谱的，有的不滚动，后来才研究清楚几个关键的知识。

1. 只要把第一个div向上滚动，后面的兄弟div不需要代码控制，它们会自动上移。

2.  that.play = false 一定要修改属性，只有修改属性才能触发控件重绘,才会有移动效果。

下面是具体的代码：VerticalScrollText.vue

<template>
    <div id="demo">
        <div class="list">
            <div class ="child" v-for="(item, index) in ulList" :key="item.id" :class="!index && play? 'toUp' : ''">
                 {{ item.msg }} !
            </div>
        </div>
    </div>
</template>

<script>
export default {
    mounted() {
        setInterval(this.startPlay, 2000)
    },
    data() {
        return {
            ulList: [
                { msg: '这是第一条信息' },
                { msg: '这是第二条信息' },
                { msg: '这是第三条信息' },
                { msg: '这是第四条信息' },
                { msg: '这是第五条信息' },
                { msg: '这是第六条信息' },
                { msg: '这是第七条信息' },
                { msg: '这是第八条信息' },
                { msg: '这是第九条信息' },
                { msg: '这是第十条信息' }
            ],
            play: true
        }
    },
    methods: {
        startPlay() {
            let that = this
            that.play = true //开始播放
            setTimeout(() => {
                that.ulList.push(that.ulList[0]) //将第一条数据塞到最后一个
                that.ulList.shift() //删除第一条数据
                that.play = false //暂停播放,此处修改，保证每一次都会有动画显示。 一定要修改属性，只有修改属性这样才能触发控件刷新冲毁!!!!
            }, 1000)
        },


        //只要对第一行进行滚动，下面的自动会跟着往上移动。
        isScroll(index){
            if(index == 0){
                return true
            }else{
                return false
            }
        }
    }
}
</script>

<style lang="scss" scoped>


.list {
    list-style: none;
    width: 500px;
    text-align: center;
    overflow: hidden;
    background-color: #ff8833;
    height: 40px;
    color: #ffff00;
    padding: 0;
    margin: 10px 0px 0px 10px;
    padding-left: 10px;
}

.child {
    text-align: left;   /**覆盖外层设置的水平居中效果**/
    height: 40px;
    line-height: 40px;  /**span 垂直居中需要这一句**/
}

.toUp {
    margin-top: -40px;  //向上移
    transition: all 0.5s;
}

</style>

为了加深理解，又写了一个场景示例：

<template>
    

        <!--消息通知效果-->
        <div id="box">
            <ul id="msg-container">
                <li class="child" v-for='(item, index) in msg' :class="!index && animate ? 'toUp' : ''">
            {{ item.name }}抽中 {{item.goods}} ----------> {{ item.count == 0 ? randomNum(item) : item.count }}人获得优惠券</li>
            </ul>
        </div>


   
</template>

<script>
 
export default {
    name: "hello",

    head: {
        title: "测试网站"
    },

   

    data() {
        
            animate: false,
            setInTime: '', // 定时器
            msg: [
                {
                    name: '张**',
                    goods: '牙膏',
                    count: 0,
                },
                {
                    name: '王**',
                    goods: '牙刷',
                    count: 0,
                },
                {
                    name: '钟**',
                    goods: '肥皂',
                    count: 0,
                }
            ]

        }
    },

    mounted() {

        this.setInTime = setInterval(this.showMarquee, 2000);
    },

    destory() {
        clearInterval(this.setInTime) // 页面销毁时清除定时器
    },

 

    methods: {

        //生成随机数
        randomNum(item) {
            if (item.count == 0) {
                item.count = Math.ceil(Math.random() * 10000);
            }
        },

        // 滚动栏滚动
        showMarquee() {
            this.animate = true
            setTimeout(() => {
                this.msg.push(this.msg[0])  将第一条数据塞到最后一个
                this.msg.shift() // //删除第一条数据
                this.animate = false
            }, 1000)
        },

    }

}

</script>

<style>

#msg-container {
    width: 500px;
    height: 80px;
    background: #AB2D00;
    color: #ffffff;
    text-align: center;
    border-radius: 18px;
    overflow: hidden;
    padding-left: 10px;
}

.child {
    height: 40px;
    line-height: 40px; /**有这一句span元素才能垂直居中**/
    text-align: left;
}

.toUp {
    margin-top: -40px;
    transition: all 1s
}

</style>