vuecli3纯js实现列表的无缝滚动

最近要做一个列表的无缝滚动展示的功能，使用了swiper7的方法，结果不是没效果就是版本冲突，再经过一上午的痛苦解决bug失败后，我决定自己写一个滚动方法，效果如图，完全实现了功能

  

1.首先是页面

<template>
  <div @mousemove="mmove" @mouseleave="mend" >
    <div id="gd1" style="height: 110px;overflow: hidden">
      <div>我是第一个</div>
      <div>我是第二个</div>
      <div>我是第三个</div>
      <div>我是第四个</div>
      <div>我是第五个</div>
      <div>我是第六个</div>
      <div>我是第七个</div>
      <div>我是第八个</div>
      <div>我是第九个</div>
    </div>
  </div>
</template>

2.js代码

<script>
export default {
  name: 'name',
  data() {
    return {
      shishi: null,
    }
  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.shishi)
  },
  destroyed() {
    //清除定时器
    clearInterval(this.shishi)
  },
  created() {
    //启动定时器
    this.start()
  },
  methods: {
    //鼠标移动事件
    mmove() {
      clearTimeout(this.shishi)
    },
    //鼠标移出事件
    mend() {
      this.start()
    },
    start() {
      //清除定时器
      clearTimeout(this.shishi)
      //定时器触发周期
      let speed = 75
      this.shishi = setInterval(this.MarqueeTest, speed)
    },
    MarqueeTest() {
      let that =this; 
      let test1 = document.getElementById('gd1')
      //判断组件是否渲染完成
      if (test1.offsetHeight == 0) {
        test1 = document.getElementById('gd1')
      } else {
        //如果列表数量过少不进行滚动
        if(test1.childNodes.length<6){
            clearTimeout(that.shishi)
            return;
          }
        //组件进行滚动
        test1.scrollTop += 1
        //判断滚动条是否滚动到底部
        if (test1.scrollTop == (test1.scrollHeight - test1.clientHeight)) {
          //获取组件第一个节点
          let a = test1.childNodes[0]
          //删除节点
          test1.removeChild(a)
          //将该节点拼接到组件最后
          test1.append(a)
        }
      }
    }
  }
}
</script>