技術標籤：程式碼片段vue.jscss3typescriptes6html

<template>
  <div>
    <ul class="_container demo" @mouseenter="mouseenter" @mouseleave="mouseleave">
      <li v-for="(i, d) in list" :key="d">{{ i }}</li>
    </ul>
  </
 
div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component({})
export default class extends Vue {
  get list() {
    let arr = [];
    for (let i = 1; i < 17; i++) {
      arr.push("第" + i + "個大西瓜"
 
);
    }
    return arr;
  }
  private Scroll(dom: any, needHeigth: number, interval: number) {
    let _dom: Element | any = this.$el.querySelector(dom);
    let _h = "-" + needHeigth + "px";
    let timer = setTimeout(() => {
      let _field = _dom.firstElementChild;
      _field.
 
style.marginTop = _h;
      let _nextDom = _field.nextElementSibling;
      _nextDom.style.marginTop = _h;
      clearTimeout(timer);
    }, 0);
    this.timer = setInterval(() => {
      let _field: Element | any = _dom.firstElementChild;
      let _nextDom = _dom.firstElementChild.nextElementSibling;
      _field.style.marginTop = "0px";
      _nextDom.style.marginTop = "0px";
      _dom.appendChild(_field);
      _dom.appendChild(_nextDom);
      _field = _dom.firstElementChild;
      _nextDom = _dom.firstElementChild.nextElementSibling;
      _field.style.marginTop = _h;
      _nextDom.style.marginTop = _h;
    }, interval);
  }
  private timer: any;
  private mounted() {
    this.Scroll(".demo", 36, 2000);
  }
  private mouseenter() {
    clearInterval(this.timer);
    this.timer = null;
  }
  private mouseleave() {
    this.Scroll(".demo", 36, 2000);
  }
}
</script>

<style>
._container {
  width: 500px;
  height: 144px;
  overflow: hidden;
  border: 1px solid #fff;
  text-align: center;
  margin: 200px auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
	background-color: cornflowerblue;

}

._container li {
  width: 200px;
  height: 36px;
  line-height: 36px;
  font-size: 18px;
  color: #fff;
}

._container li:first-child,
._container li:nth-of-type(2) {
  margin-top: 0;
  transition: margin-top 1s;
}
</style>

JavaScript程式碼

<script>
export default {
  name: "scroll",
  data() {
    return {
      timer: null
    };
  },
  computed: {
    list() {
      let arr = [];
      for (let i = 1; i < 17; i++) {
        arr.push("第" + i + "個大西瓜");
      }
      return arr;
    }
  },
  mounted() {
    this.Scroll(".demo", 36, 2000);
  },
  methods: {
    mouseenter() {
      clearInterval(this.timer);
      this.timer = null;
    },
    mouseleave() {
      this.Scroll(".demo", 36, 2000);
    },
    Scroll(dom, needHeigth, interval) {
      let _dom = this.$el.querySelector(dom);
      let _h = "-" + needHeigth + "px";
      let timer = setTimeout(() => {
        let _field = _dom.firstElementChild;
        _field.style.marginTop = _h;
        let _nextDom = _field.nextElementSibling;
        _nextDom.style.marginTop = _h;
        clearTimeout(timer);
      }, 0);
      this.timer = setInterval(() => {
        let _field = _dom.firstElementChild;
        let _nextDom = _dom.firstElementChild.nextElementSibling;
        _field.style.marginTop = "0px";
        _nextDom.style.marginTop = "0px";
        _dom.appendChild(_field);
        _dom.appendChild(_nextDom);
        _field = _dom.firstElementChild;
        _nextDom = _dom.firstElementChild.nextElementSibling;
        _field.style.marginTop = _h;
        _nextDom.style.marginTop = _h;
      }, interval);
    }
  }
};
</script>

js原生訊息無縫輪播：https://blog.csdn.net/weixin_42513555/article/details/113759996

vue+ts訊息無縫輪播：https://blog.csdn.net/weixin_42513555/article/details/113759068