vue 实现无缝滚动

Vue 实现无缝滚动的方法

无缝滚动是一种常见的UI效果，适用于轮播图、新闻列表等场景。以下是几种实现方式：

使用CSS动画实现

通过CSS的animation和@keyframes实现循环滚动效果，适合简单场景。

<template>
  <div class="scroll-container">
    <div class="scroll-content">
      {{ content }}{{ content }} <!-- 重复内容实现无缝衔接 -->
    </div>
  </div>
</template>

<style>
.scroll-container {
  overflow: hidden;
  white-space: nowrap;
}
.scroll-content {
  display: inline-block;
  animation: scroll 10s linear infinite;
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
</style>

使用Vue的定时器动态控制

通过JavaScript动态计算位置，实现更灵活的控制。

<template>
  <div class="scroll-wrapper" ref="wrapper">
    <div class="scroll-list" :style="{ transform: `translateX(${offset}px)` }">
      <div v-for="(item, index) in list" :key="index">{{ item }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3'],
      offset: 0,
      timer: null
    };
  },
  mounted() {
    this.startScroll();
  },
  methods: {
    startScroll() {
      this.timer = setInterval(() => {
        this.offset -= 1;
        if (Math.abs(this.offset) >= this.$refs.wrapper.offsetWidth / 2) {
          this.offset = 0; // 重置位置
        }
      }, 20);
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

使用第三方库（如vue-seamless-scroll）

对于复杂需求，可直接使用封装好的库。

1. 安装库：

   npm install vue-seamless-scroll

2. 示例代码：

   
   <template>
   <vue-seamless-scroll :data="list" :class-option="option">
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
   </vue-seamless-scroll>
   </template>

import vueSeamlessScroll from 'vue-seamless-scroll'; export default { components: { vueSeamlessScroll }, data() { return { list: ['Data 1', 'Data 2', 'Data 3'], option: { direction: 1, // 滚动方向 step: 0.5, // 速度 limitMoveNum: 3 // 可见项数 } }; } }; ```

关键注意事项

• 性能优化：避免频繁DOM操作，使用CSS硬件加速（如transform）。
• 响应式处理：监听容器宽度变化时需重新计算滚动参数。
• 移动端适配：触摸事件需与滚动逻辑兼容。

以上方法可根据项目需求选择，CSS方案适合静态内容，定时器方案可控性更强，第三方库则能快速实现复杂效果。