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

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

HTML 代码：

<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>

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

以上关于VUE版报名成功数据滚动代码的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。