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

浏览：781次- 评论：2次- 发布时间：2022-05-19

Html

Css



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

}

}
})

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3