Vue 循环走马灯

1、使用 transform: translateX()，循环将滚动内容在容器内偏移，超出容器部分隐藏；

2、避免滚动到末尾时出现空白，需要预留多几个。

3、一次循环偏移的距离scrollLoopWidth?可能受样式影响需要做些微调，比如单个item的宽度、间隔、边框等。

<template>
    <div>
        <div class="scroll-container">
            <div class="scroll-content" id="scroll-content">
                <div class="scroll-item" v-for="(item, index) in itemList" :key="index">
                    <div>{{ item.title }}</div>
                    <div>{{ item.desc }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
          itemList: [
            {
              title: "Vue",
              desc: "一套用于构建用户界面的渐进式框架"
            },
            {
              title: "Vite",
              desc: "下一代前端开发与构建工具"
            },
            {
              title: "Pinia",
              desc: "Vue状态管理框架"
            },
            {
              title: "TypeScript",
              desc: "JavaScript类型的超集，可以编译成纯JavaScript"
            },
            {
              title: "NaiveUI",
              desc: "Vue3组件库"
            },

            // 重复放几个，假装无缝衔接，如果重复的个数需要多个才能铺满屏，可以使用数组的相关方法将已经滚动过了的放到数组后面
            {
              title: "Vue",
              desc: "一套用于构建用户界面的渐进式框架"
            },
            {
              title: "Vite",
              desc: "下一代前端开发与构建工具"
            },
            {
              title: "Pinia",
              desc: "Vue状态管理框架"
            }
          ],
          scrollContent: "",
          scrollSpeed: 1, // 每次偏移像素
          translateX: 0,
          scrollInterval: 0,
          scrollLoopWidth: 0,
        }
    },
    mounted() {
      this.scrollContent = document.getElementById("scroll-content");
      let item = this.itemList.length - 3; // 一次循环移动的item数
      this.scrollLoopWidth = 240 * item + 10 * (2 * item + 1); // 单个宽度 * 个数 + 间隔 （注意，这里可能受样式影响，需要做适当的调整）
      this.scrollInterval = setInterval(() => {
        this.autoScrollContent();
      }, 10); // 每10毫秒移动 scrollSpeed 个像素
    },
    methods: {
      autoScrollContent() {
        this.translateX += this.scrollSpeed;
        this.scrollContent.style.transform = `translateX(${-this.translateX}px)`;
        // 一次循环结束，重新滚动
        if (this.translateX >= this.scrollLoopWidth) {
          this.translateX = 0;
        }
      },
    },
}
</script>
<style lang="stylus" scoped>
  .scroll-container {
    width: 800px;
    height: 400px;
    background-color: #e9e9e9;
    overflow: hidden;
    .scroll-content {
      display: flex;
      align-items: center;
      .scroll-item {
        width: 240px;
        min-width: 240px;
        height: 100px;
        text-align: center;
        margin: 0 10px;
        border: 1px solid #409eff;
        img {
          width: 50px;
          height: 50px;
          border-radius: 25px;
        }
      }
    }
  }
</style>