vue文字左右循环滚动播放

### 实现文本水平自动轮播 为了实现在 Vue 项目中的文本水平自动轮播效果，可以创建一个专门的组件来处理这一功能。此方法不仅能够保持良好的性能表现，还能确保代码具有较高的可维护性和扩展性。 #### 组件设计思路 通过监听窗口大小变化以及设置定时器触发元素位置更新的方式实现连续滚动的效果。具体来说，在 `mounted` 生命周期钩子函数内启动计时器，并利用 CSS 的 transform 属性配合 JavaScript 来控制 DOM 元素的位置偏移量，从而达到平滑过渡的目的[^1]。 下面给出一段简单的示例代码： ```html <template> <div class="scroll-container"> <!-- 使用slot插槽可以让父组件传递具体的滚动内容 --> <ul :style="{transform:`translateX(${offset}px)`}" ref="list"> <li v-for="(item, index) in items" :key="index">{{ item }}</li> <!-- 复制一份列表项以形成无缝衔接 --> <li v-for="(item, index) in items" :key="items.length + index">{{ item }}</li> </ul> </div> </template> <script> export default { data() { return { offset: 0, direction: 'left', speed: -2, // 控制移动速度 intervalId: null, items: ['Item One', 'Item Two', 'Item Three'] } }, mounted() { const listWidth = this.$refs.list.offsetWidth; let containerWidth = this.$el.offsetWidth; function updateOffset() { if (Math.abs(offset) >= listWidth / 2) { offset = 0; // 当超出一半宽度时重置位移值 } requestAnimationFrame(updateOffset); if(direction ==='left'){ offset +=speed; }else{ offset -=speed; } } updateOffset(); window.addEventListener('resize', () => {containerWidth = $el.offsetWidth}); // 启动间隔执行的方法来进行持续性的动画帧请求 this.intervalId=setInterval(()=>{},17); //约等于每秒60次刷新率 }, beforeDestroy(){ clearInterval(this.intervalId); } } </script> <style scoped> .scroll-container { overflow: hidden; white-space: nowrap; } ul { display: inline-block; padding-left: 0; margin: 0; transition: all .5s ease-in-out; } li { display: inline-block; padding-right: 2em; } </style> ``` 这段代码展示了如何在一个 Vue 单文件组件中定义并初始化必要的数据属性；并通过组合使用 `requestAnimationFrame()` 和 `setInterval()` 方法实现了较为流畅的文字横向滚动效果。同时为了避免因浏览器渲染机制导致的内容闪烁现象，这里采用了双倍复制列表项的方式来模拟无限循环播放的效果[^4]。