vue 标题上下滚屏 无缝轮播

参考网址：https://www.jianshu.com/p/b6813193ca0d

<template>
  <div class="wrap" :style="{height:height + 'px'}">
    <div
      class="box"
      :style="{top: '-' + height + 'px', height: (height * actualMap.length) + 'px'}"
    >
      <div
        class="item"
        v-for="(item,index) in actualMap"
        :key="index"
        @click="showPreview(item)"
        :style="{'height':height + 'px','line-height':height + 'px'}"
      >
        <div
          class="inner_content"
          :style="{'line-height':height/2 + 'px'}"
        >{{item.rollTitle == "" ? item.title : item.rollTitle}}</div>
        <div
          class="amount_title"
          :style="{'line-height':height/2 + 'px'}"
        >{{item.pubTm|formatDate2}} · 浏览次数 {{item.viewCount}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "selfCarousel", // 自定义标题栏走马灯
  props: {
    height: {
      default: 40,
      type: Number
    },
    contentArr: {
      default: [],
      type: Array
    }
  },
  data() {
    return {
      box: null,
      timer: undefined,
      moveTimer: undefined,
      index: 1
    };
  },
  computed: {
    actualMap: function() {
      let Tmp = this.contentArr
        ? JSON.parse(JSON.stringify(this.contentArr))
        : [];
      if (this.contentArr.length > 0) {
        Tmp.unshift(this.contentArr[this.contentArr.length - 1]);
        Tmp.push(this.contentArr[0]);
      }
      return Tmp;
    }
  },
  mounted() {
    this.box = document.getElementsByClassName("box")[0];
    this.inintTimer();
    let _this = this;
    $(".wrap").hover(
      function(e) {
        clearInterval(_this.timer);
        _this.timer = undefined;
      },
      function() {
        _this.inintTimer();
      }
    );
  },
  methods: {
    showPreview(row) {
      this.$emit("showPreview", row);
    },
    moveWidthIndex() {
      var l = this.index * -this.height - this.box.offsetTop;
      var count = 0;
      clearInterval(this.moveTimer);
      let self = this;
      this.moveTimer = setInterval(function() {
        count++;
        self.box.style.top =
          self.box.offsetTop + l / (self.contentArr.length * 2) + "px";
        if (count >= self.contentArr.length * 2) {
          clearInterval(self.moveTimer);
          self.box.style.top = self.index * - self.height + "px";
        }
      }, 20);
    },
    nextStep() {
      this.index++;
      if (this.index == this.actualMap.length) {
        this.index = 2;
        this.box.style.top = "-" + this.height + "px";
      }
      this.moveWidthIndex();
    },
    inintTimer() {
      let self = this;
      this.timer = setInterval(function() {
        self.nextStep();
      }, 2000);
    }
  }
};
</script>

<style lang="less" scoped>
.wrap {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.box {
  width: 100%;
  position: absolute;
}
.item {
  width: 100%;
}
.inner_content {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  color: #333333;
}
.amount_title {
  font-size: 14px;
  color: #999999;
}
</style>