VUE版报名成功数据滚动

﹏ヽ暗。殇╰゛Y 2023-10-06 21:55 16阅读 0赞

![在这里插入图片描述][24ede6038793495da21cb69b6a0d6294.gif_pic_center]

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>wgchen</title>
        <link rel="shortcut icon" href="#" />
        <meta name="keywords" content="https://wgchen.blog.csdn.net">
        <meta name="keywords" content="技术文章">
        <meta name="keywords" content="博客">
        <meta name="keywords" content="willem">
        <meta name="keywords" content="ycc">
    </head>
    <style>
    .race-lamp-card {
          
      position:relative;
      height:240px;
      border-radius:4px;
      box-sizing:border-box;
      overflow:hidden;
      margin-top:8px;
    }
    li {
          
      height:26px;
      font-size:14px;
      font-weight:400;
      line-height:26px;
    }
    .horseLamp_list {
          
      display:block;
      position:absolute;
      top:0;
      left:0;
    }
    .horseLamp_top {
          
      transition:all 0.2s;
      margin-top:-31px
    }
    .swipe_list {
          
    }
    .horseLamp_list {
          
      width:100%;
      padding:0;
      margin:0;
    }
    .swipe-item {
          
      width:100%;
      padding-top:12px;
      display:flex;
      flex-direction:row;
      justify-content:space-between;
    }
    .item_name {
          
      width:70%;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    </style>
    
    <body>
     
    <script src="https://s3.pstatp.com/cdn/expire-1-M/vue/2.6.10/vue.min.js"></script>
    <div id="app">
        <div class="swipe_list">
            <div class="vueBox">
                <div class="race-lamp-card">
                    <ul class="horseLamp_list" :class="{horseLamp_top:animate}">
                        <li class="swipe-item" v-for="(item, index) in swipeList" v-bind:key="index">
                            <div class="item_name">
                                {
       {item.name}}
                            </div>
                            <div>
                                {
       {item.time}}
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <script>
    new Vue({
          
        el: '#app',
        data() {
          
            return {
          
                animate: false,
                swipeList: [{
          
                        id: 0,
                        name: '医院名称1',
                        time: '2022-01-06'
                    },
                    {
          
                        id: 2,
                        name: '医院名称2',
                        time: '2022-01-06'
                    },
                    {
          
                        id: 3,
                        name: '医院名称3',
                        time: '2022-01-06'
                    },
                    {
          
                        id: 4,
                        name: '医院名称4',
                        time: '2022-01-06'
                    },
                    {
          
                        id: 5,
                        name: '医院名称5',
                        time: '2022-01-06'
                    },
                    {
          
                        id: 6,
                        name: '医院名称6',
                        time: '2022-01-06'
                    },
                    {
          
                        id: 7,
                        name: '医院名称7',
                        time: '2022-01-06'
                    },
                    {
          
                        id: 8,
                        name: '医院名称8',
                        time: '2022-01-06'
                    },
                    {
          
                        id: 9,
                        name: '医院名称9',
                        time: '2022-01-06'
                    },
                    {
          
                        id: 10,
                        name: '医院名称10',
                        time: '2022-01-06'
                    },
                    {
          
                        id: 11,
                        name: '医院名称11',
                        time: '2022-01-06'
                    },
                    {
          
                        id: 12,
                        name: '医院名称12',
                        time: '2022-01-06'
                    },
                    {
          
                        id: 13,
                        name: '医院名称13',
                        time: '2022-01-06'
                    },
                    {
          
                        id: 14,
                        name: '医院名称14',
                        time: '2022-01-06'
                    },
                    {
          
                        id: 15,
                        name: '医院名称15',
                        time: '2022-01-06'
                    },
                    {
          
                        id: 16,
                        name: '医院名称16',
                        time: '2022-01-06'
                    },
                    {
          
                        id: 17,
                        name: '医院名称17',
                        time: '2022-01-06'
                    },
                    {
          
                        id: 18,
                        name: '医院名称18',
                        time: '2022-01-06'
                    }
                ]
            }
        },
        created: function() {
          
            setInterval(this.showhorseLamp, 1000)
        },
        methods: {
          
            showhorseLamp: function() {
          
                var len = this.swipeList.length;
                // console.log(len);
                if (len > 6) {
          
                    this.animate = true;
                    setTimeout(() => {
          
                        this.swipeList.push(this.swipeList[0]);
                        this.swipeList.shift();
                        this.animate = false;
                    }, 1000);
                }
            }
        }
    })
    </script>
    
    </body>
    </html>

[24ede6038793495da21cb69b6a0d6294.gif_pic_center]: https://img-blog.csdnimg.cn/24ede6038793495da21cb69b6a0d6294.gif#pic_center