VUE版报名成功数据滚动

DOCTYPE html>



    
    wgchen
    
    
    
    
    
    


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



 


    
        
            
                
                    
                        
                            {{item.name}}
                        
                        
                            {{item.time}}
                        
                    
                
            
        
    



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