VUE版报名成功数据滚动代码

代码描述：用于移动端数据循环滚动效果。

HTML 代码：

<script src="https://s3.pstatp.com/cdn/expire-1-M/vue/2.6.10/vue.min.js"></script>
<div id="app">
    <div >
        <div >
            <div >
                <ul  :>
                    <li  v-for="(item, index) in swipeList" v-bind:key="index">
                        <div >
                            {{item.name}}
                        </div>
                        <div>
                            {{item.time}}
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS 代码：

.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;
}

JS 代码：

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);
            }
        }
    }
})