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>