vue垂直滚动文字公告效果

Posted 2022-08-24 汤米粥

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

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>