记：在Vue项目中写循环滚动

前言

网上有挺多第三方库可以调用，但是怕会有影响自己的项目就没有使用，自己写一个简单的循环滚动列表记录下

---

简单的说就是通过连续位移造成的假象

一、代码

1.html片段

代码如下（示例）：
明了一点就把css内嵌

<div style="border:1px solid;height: 32px;width:60%;overflow: hidden;white-space: nowrap;">
      <div ref="testnode">
        <div id="test-begin" ref="testbegin" style="display: inline;">
          <span style="margin-right:20px;">第一条很长很长很长很长很长很长</span>
          <span style="margin-right:20px;">第二条很长很长很长很长很长很长</span>
          <span style="margin-right:20px;">第三条很长很长很长很长很长很长</span>
          <span style="margin-right:20px;">第四条很长很长很长很长很长很长</span>
          <span style="margin-right:20px;">第五条很长很长很长很长很长很长</span>
          <span style="margin-right:20px;">第六条很长很长很长很长很长很长</span>
        </div>
        <div id="test-end" ref="testend" style="display: inline;" v-html="testEndHtml"></div>
      </div>

2.script片段

代码如下（示例）：

export default {
  name: 'Test',
  data() {
    return {
      testNode: '',
      testBeginDiv: '',
      testEndDiv: '',
      testEndHtml: '',
      testTimer: null,
      testDistance: 0,
      testSpeed: 60,
    }
  },
  mounted() {
    this.testStarMoveFunc()
  },
  destroyed() {
    clearInterval(this.testTimer) // 清除定时器
  },
  methods: {
    testStarMoveFunc() {
      this.testNode = this.$refs.testnode //获取外层盒子
      this.testBeginDiv = this.$refs.testbegin // 获取开始盒子
      this.testEndDiv = this.$refs.testend // 获取结束盒子
      console.log(this.testNode.offsetWidth, this.testBeginDiv.offsetWidth, this.testEndDiv.offsetWidth) // 获取三个盒子宽度
      if (this.testBeginDiv.offsetWidth > this.testNode.offsetWidth) {
        this.testEndHtml = this.testBeginDiv.innerHTML // 开始盒子的内容赋值到结束盒子
        this.testTimer = setInterval(() => {
          this.testDistance = this.testDistance - 1
          // 如果位移超过文字宽度，则回到起点
          if (-this.testDistance >= this.testBeginDiv.offsetWidth) {
            this.distance = 0
          }
          this.$refs.testnode.style.transform = 'translateX(' + this.testDistance + 'px)'
        }, this.testSpeed)
      }
    },
  },
}

---