vue 文字 轮播演示

<template>
  <div>
    <h2>公告栏文字停顿滚动</h2>
    <div class="textBox">
      <transition name="slide">
        <p class="text" :key="text.id">{{text.val}}</p>
      </transition>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'demo',
    data () {
      return {
        textArr: [
          '1 第一条公告',
          '2 第二条公告第二条公告',
          '3 第三条公告第三条公告第三条公告'
        ],
        lists:"123123dfasfafadf32323424332222",
        number: 0,

        newItems:[
          {name: '张三', detail: '152****7846抽中5元电影票'},
          {name: '张三', detail: '134****7866抽中5元饭票'},
          {name: '张三', detail: '180****3300抽中华为新品 HUAWEI nova 4手机'}
        ],

      }
    },
    computed: {
      text () {
        return {
          id: this.number,
          val: this.textArr[this.number]
        }
      }
    },
    mounted () {
      this.startMove()
    },
    methods: {
      startMove () {
        // eslint-disable-next-line
        let timer = setTimeout(() => {
          if (this.number === 2) {
            this.number = 0;
          } else {
            this.number += 1;
          }
          this.startMove();
        }, 2000); // 滚动不需要停顿则将2000改成动画持续时间
      }
    }
  }
</script>

<style scoped>
  h2 {
    padding: 20px 0
  }
  .textBox {
    width: 100%;
    height: 40px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center;
  }
  .text {
    width: 100%;
    position: absolute;
    bottom: 0;
  }
</style>