vue-封装上下(垂直方向)轮播

需求：没有找到特别好的上下轮播插件-所以自己写了一个简单的demo

一.上下平滑轮播-移入停止-移出继续轮播

<!--
 * 消息滚动
-->
<template>
  <div class="news">
    <div id="roll" class="InfoBox" @mouseover="this.mouseOver" @mouseout="this.mouseOut">
      <div v-for="item in 5" :key="item" class="item">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    var area = document.getElementById("roll");
    // 多加了一组
    area.innerHTML += area.innerHTML;
    this.area = area;
    setInterval(this.scroll, 50);
  },
  data() {
    return {
      area: {},
      stop: false,
      scrollItemNumber: 0,
    };
  },
  methods: {
    scroll() {
      if (!this.stop) {
        // this.area.scrollHeight / 2 这是滚动所有元素的高度
        if (this.area.scrollTop >= this.area.scrollHeight / 2) {
          this.area.scrollTop = 0;
        } else {
          this.area.scrollTop++;
        }
      }
    },
    mouseOver() {
      this.stop = true;
    },
    mouseOut() {
      this.stop = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.news {
  margin: 20px;
  height: 300px;
  background: aqua;
  text-align: center;

  .InfoBox {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    background: rgb(94, 163, 233);

    .item {
      margin-top: 30px;
      padding: 10px;
      background: rgb(54, 230, 83);
      text-align: center;
      cursor: pointer;
    }
  }
}
</style>

二.加了控制条件的上下轮播-我只是写了个demo(我这个控制条件是5s停顿一次 接着轮播)

<!--
 * 消息滚动
-->
<template>
  <div class="news">
    <div id="roll" class="InfoBox" @mouseover="this.mouseOver" @mouseout="this.mouseOut">
      <div v-for="item in 5" :key="item" class="item">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    var area = document.getElementById("roll");
    // 多加了一组
    area.innerHTML += area.innerHTML;
    this.area = area;
    setInterval(this.scroll, 50);
  },
  data() {
    return {
      area: {},
      stop: false,
      scrollItemNumber: 0,
    };
  },
  methods: {
    scroll() {
      // 控制什么时间 停顿一下 我用的是 5s停顿一次 这个可以根据自己需求
      if (this.scrollItemNumber !== 0 && this.scrollItemNumber % 100 === 0) {
        this.stop = true;
        setTimeout(() => {
          this.stop = false;
          this.scrollItemNumber = 0
        }, 1000)
      }
      if (!this.stop) {
        this.scrollItemNumber++
        console.log(this.scrollItemNumber);

        // this.area.scrollHeight / 2 这是滚动所有元素的高度
        if (this.area.scrollTop >= this.area.scrollHeight / 2) {
          this.area.scrollTop = 0;
        } else {
          this.area.scrollTop++;
        }
      }
    },
    mouseOver() {
      this.stop = true;
    },
    mouseOut() {
      this.stop = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.news {
  margin: 20px;
  height: 300px;
  background: aqua;
  text-align: center;

  .InfoBox {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    background: rgb(94, 163, 233);

    .item {
      margin-top: 30px;
      padding: 10px;
      background: rgb(54, 230, 83);
      text-align: center;
      cursor: pointer;
    }
  }
}
</style>