使用Vue来3分钟撸一个滚动公告效果！

1、首先30秒搞定Html结构

<template>
  <div>
    <div class="notice-box" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
      <transition name="notice-slide">
        <p class="notice-item" :key="noticeList.id">
          {{ noticeList.text }}
        </p>
      </transition>
    </div>
  </div>
</template>

2、再花60秒搞定样式

<style scoped>
.notice-box {
  width: 500px;
  height: 30px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  text-align: center;
  border: 1px solid red;
}
.notice-item {
  width: 100%;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
}
.notice-slide-enter-active,
.notice-slide-leave-active {
  transition: all 0.8s linear;
}
.notice-slide-enter {
  top: 30px;
}
.notice-slide-leave-to {
  top: -30px;
}
</style>

3、最后花1分30秒搞定js逻辑部分

<script>
export default {
  name: 'scroll',
  data() {
    return {
      noticeArr: [
        { title: '第1条公告1111111111111111' },
        { title: '第2条公告2222222222222222' },
        { title: '第3条公告3333333333333333' },
        { title: '第4条公告4444444444444444' },
        { title: '第5条公告5555555555555555' },
      ],
      number: 0,
    };
  },
  computed: {
    noticeList() {
      return {
        id: this.number,
        text: this.noticeArr[this.number].title,
      };
      timer:nuul
    },
  },
  mounted() {
    this.scrollMove();
  },
  methods: {
  	//滚动函数
    scrollMove() {
      this.timer = setTimeout(() => {
        if (this.number === this.noticeArr.length - 1) {
          this.number = 0;
        } else {
          this.number += 1;
        }
        this.scollMove();
      }, 3000);
    },
    //鼠标进入
    mouseEnter() {
      clearInterval(this.timer);
    },
    //鼠标离开
    mouseLeave() {
      this.scrollMove();
    }
  }
};
</script>

4、最后总结

本效果主要使用vue中的transition组件实现，关于如何灵活使用vue的transition组件，可以多看看vue的文档。 如果觉得本文对您有用，记得给个赞！谢谢！