Vue单排文字向上滚动效果_vue 文字循环向上滚动

思路：1.先写好布局，遍历数据

           2.在定义一个开关，控制是否给列表父级添加 向上滚动的class

           3.在利用 setInterval 每多少秒打开开关 然后添加class 

           4.在利用 setTimeout 在 setInterval 每次执行的时间内 把第一条数据添加到末尾，并且关闭开关，即可！

Html

<div class="scrollTxtWarp">

      <div :class="topState ?'scrollTxt top30':'scrollTxt'">

        <p v-for="(item,idx) in listNav2" :key="idx">{{item}}</p>

      </div>

    </div>

CSS

.scrollTxtWarp{

  height: 30px;

  overflow: hidden;

}

.scrollTxt p{

  height: 30px;

  line-height: 30px;

  font-size: 16px;

  text-align: center;

}

.top30{

  transition: all 0.5s;

  margin-top: -30px;

}

JS

data里面：

 listNav2: ['全部','aaa','bbb','ccc','ddd','eee'],

 topState: false,

methods里面：

txtTop(){

      setInterval(() => {

        this.topState = true;

        setTimeout(() => {

          this.listNav2.push(this.listNav2.shift());

          this.topState = false;

        }, 500);

      }, 3000);

    }