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

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

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » VUE版报名成功数据滚动代码

发表回复