vue weex 新闻公告向上轮播

梦里梦外; 2021-09-17 22:22 317阅读 0赞

<template>
    
        <div>
            <div class="news_box">
                <div class="inner-container">
                    <p class="text" v-for="(text, index) in arr" :key="index">{
       {text}}</p>
                </div>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            name: "news",
            data(){
                return{
                    arr: [
                        '1 不是被郭德纲发现的，也不是一开始就收为徒弟。',
                        '2 现在雅阁这个状态像极了新A4L上市那段日子。',
                        '3 低配太寒碜，各种需要加装，中配定价过高，又没啥特色',
                        '4 然后各种机油门、经销商造反什么的幺蛾子。',
                        '5 看五月销量，建议参考A4，打8折吧。',
                        '1 不是被郭德纲发现的，也不是一开始就收为徒弟。',
                    ]
                }
            }
        }
    </script>
    
    <style scoped>
        .inner-container {
            animation: myMove 5s linear infinite;
            animation-fill-mode: forwards;
        }
        /*文字停顿滚动*/
        @keyframes myMove {
            0% {
                transform: translateY(0);
            }
            10% {
                /*transform: translateY(-30px);*/
            }
            20% {
                transform: translateY(-30px);
            }
            30% {
                /*transform: translateY(-60px);*/
            }
            40% {
                transform: translateY(-60px);
            }
            50% {
                /*transform: translateY(-90px);*/
            }
            60% {
                transform: translateY(-90px);
            }
            70% {
                /*transform: translateY(-120px);*/
            }
            80% {
                transform: translateY(-120px);
            }
            90% {
                /*transform: translateY(-150px);*/
            }
            100% {
                transform: translateY(-150px);
            }
        }
    
        .text{
            white-space: nowrap;
            overflow: hidden;
        }
    
        .news_box{
            height: 30px;
            white-space: nowrap;
            overflow: hidden;
            background: #00B4FF;
        }
    
    </style>