基于vue 公告轮播

<template>
  <div>
    <div class="textBox">
      <transition name="slide">
        <p class="text" :key="text.id">
        <el-tag type="warning">{{text.val.tag}}</el-tag>
            {{text.val.title}}</p>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'scroll',
  data () {
    return {
      textArr: [
        {tag:'精彩推荐',title:'1 第一条公告111111111111111'},
         {tag:'热门推荐',title:'1 第23条公告嘎嘎嘎嘎嘎嘎灌灌灌灌灌'},
        {tag:'精彩推荐',title:'1 第3条公告嘎嘎嘎嘎嘎嘎灌灌灌灌灌'},
        {tag:'公司公告',title:'1 第2条公告嘎嘎嘎嘎嘎嘎灌灌灌灌灌'},
        {tag:'热门推荐',title:'1 第2333条公告嘎嘎嘎嘎嘎嘎灌灌灌灌灌'},
      ],
      number: 0
    }
  },
  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 === this.textArr.length) {
          this.number = 0;
        } else {
          this.number += 1;
        }
        this.startMove();
      }, 2500); // 滚动不需要停顿则将2000改成动画持续时间
    }
  }
}
</script>

<style scoped>
  .textBox {
    width: 100%;
    height: 40px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center;
  }
  .text {
    width: 100%;
    position: absolute;
    bottom: 0;
  }
  .slide-enter-active, .slide-leave-active {
    transition: all 0.5s linear;
  }
  .slide-enter{
    transform: translateY(20px) scale(1);
    opacity: 1;
  }
  .slide-leave-to {
    transform: translateY(-20px) scale(0.8);
    opacity: 0;
  }
</style>

多次运行后发现有个小BUG，如下。原因是this.number+1后才等于数组的长度，数组长度等于this.number+1，重新公告开始轮播

if (this.number+1 === this.textArr.length) {
          this.number = 0;
        }
 而不是
 if (this.number === this.textArr.length) {
          this.number = 0;
        }

TypeError: Cannot read property 'tag' of undefined

<template>
  <div>
    <div class="textBox">
      <transition name="slide">
        <div class="text" :key="text.id">
          <p type="warning">{{ text.val.tag }}</p>
          <p>{{ text.val.title }}</p>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: "scroll",
  data() {
    return {
      textArr: [
        { tag: "精彩推荐", title: "第1公告111111111111111" },
        { tag: "热门推荐", title: "第2条公告嘎嘎嘎嘎嘎嘎灌灌灌灌灌" },
        { tag: "精彩推荐", title: "第3条公告嘎嘎嘎嘎嘎嘎灌灌灌灌灌" },
        { tag: "公司公告", title: "第4条公告嘎嘎嘎嘎嘎嘎灌灌灌灌灌" },
         { tag: "经典视频", title: "第5条公告嘎嘎嘎嘎嘎嘎灌灌灌灌灌" },
      ],
      number: 0,
    };
  },
  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+1 === this.textArr.length) {
          this.number = 0;
        } else {
          this.number += 1;
        }
        this.startMove();
      }, 2500); // 滚动不需要停顿则将2000改成动画持续时间
    },
  },
};
</script>

<style scoped>
.textBox {
  width: 100%;
  height: 40px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  text-align: center;
  display: flex;
  justify-content: space-between;
}
.text {
  width: 100%;
  position: absolute;
  bottom: 0;
  display: inline-block;
  padding-right: 20px;
}
p {
  display: inline-block;
  margin-right:50px;
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s linear;
}
.slide-enter {
  transform: translateY(20px);
  opacity: 1;
}
.slide-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
</style>