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抓紧创作!

微信微信 支付宝支付宝

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

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » VUE版报名成功数据滚动代码

发表回复

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们