Vue 实现文字上下滚动

Posted 2023-03-03

参考技术A <div class="marquee">

      <div class="marquee_title">

                 <span>免费微报</span>

      </div>

        <div class="marquee_box">

                <ul class="marquee_list":class="marquee_top:animate">

                        <li v-for="(item,index) in marqueeList">

                                item.name

                        </li>

                </ul>

        </div>

</div>

.marquee

width: 100%;

height: 50px;

align-items: center;

color: #3A3A3A;

background-color: white;

display: flex;

box-sizing: border-box;

overflow: hidden;



.marquee_title

padding: 0 20px;

height: 21px;

font-size: 14px;

border-right: 1px solid #d8d8d8;

align-items: center;



.marquee_box

display: block;

position: relative;

width: 60%;

height: 30px;

overflow: hidden;



.marquee_list

display: block;

position: absolute;

top: 0;

left: 0;



.marquee_top

transition: all 0.5s;

margin-top: -30px



.marquee_list li

height: 30px;

line-height: 30px;

font-size: 14px;

padding-left: 20px;



.marquee_list li span

padding: 0 2px;



下面的这个放到  Vue   data里面的return里面去  -------------   也就是》》》》data（）return

animate: false,

marqueeList: [

               

                    name: '1军电视剧烦恼是的空间开发'

                ,

               

                    name: '2军水电费了羧甲淀粉钠盛开'

                ,

               

                    name: '3军第三方库收到货否'

                ,

               

                    name: '4军杜师傅ios'

               

            ],

接着在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),