vue.js动态数据滚动文字公告代码

来源:https://www.sucaihuo.com/js/3473.html 2018-02-22 18:26浏览(6566) 收藏

一款同时兼容PC与手机端的vue.js动态数据滚动文字公告代码,文字向上滚动切换效果。
vue.js动态数据滚动文字公告代码
分类:文字特效 > 文字滚动 难易:初级
查看演示 下载资源 下载积分: 10 积分
有问题,点击联系客服

js代码

<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el: ".vueBox",
        data: {
            animate: false,
            marqueeList: [
                {
                    name: '1军',
                    city: '北京',
                    amount: '10'
                },
                {
                    name: '2军',
                    city: '上海',
                    amount: '20'
                },
                {
                    name: '3军',
                    city: '广州',
                    amount: '30'
                },
                {
                    name: '4军',
                    city: '重庆',
                    amount: '40'
                }
            ]
        },
        created: function () {
            setInterval(this.showMarquee, 2000)
        },
        methods: {
            showMarquee: function () {
                this.animate = true;
                setTimeout(()=>{
                    this.marqueeList.push(this.marqueeList[0]);
                this.marqueeList.shift();
                this.animate = false;
            },500)},
        }
    });
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2