vue页面文字上下滚动

最新推荐文章于 2024-07-23 15:45:06 发布

九点五亿少女的梦

最新推荐文章于 2024-07-23 15:45:06 发布

阅读量496

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44856917/article/details/134164416

版权

在这里插入图片描述

 <div class="marquee_box">
     <ul class="marquee_list" :class="{marquee_top:animate}">
         <li v-for="(item, index) in marqueeList" :key="index">
             <span class="winningListSpan2">{{item.Name}}</span>
             <span class="winningListSpan3">&nbsp;&nbsp;抽中&nbsp;</span>
             <span class="winningListSpan4">{{item.Name}}</span>
         </li>
     </ul>
 </div>

  new Vue({
	el: '#app',
	data: {
	animate: false,
	marqueeList: [{
	         Name: '123'
	         },{
	         Name: '456'
	}],
	}，
	 methods: {
                // 文字轮播。//贼重要！！！！！
                showMarquee() {
                    this.animate = true;
                    setTimeout(() => {
                        this.marqueeList.push(this.marqueeList[0]);
                        this.marqueeList.shift();
                        this.animate = false;
                    }, 500)
                },
                getComputedStyle() {
                    var that = this;
                    $.ajax({
                        type: "get",
                        url: "xxxxxxxx/Register/GetWinningList",
                        success: function (data) {
                            console.log("data", data)
                            that.marqueeList = data.list;
                            setInterval(that.showMarquee, 1500);//贼重要！！！！！
                        }
                    });
                },
            }，
           	mounted(){
           	   this.getComputedStyle();
           	}
});

 .marquee_box {
     display: block;
     position: relative;
     width: 60%;
     height: .5rem;
     overflow: hidden;
 }
 .marquee_list {
     display: block;
     position: absolute;
     top: 0;
     left: 0;
 }
 .marquee_top {
     transition: all 0.5s;
     margin-top: -.5rem
 }
 .marquee_list li {
     height: .5rem;
     line-height: .5rem;
     padding-left: .2rem;
 }
 .marquee_list li span {
     padding: 0 2px;
 }