当前位置：首页 > VUE

vue实现无缝连接

2026-01-18 16:58:24VUE

vue实现无缝滚动效果

使用Vue实现无缝滚动效果可以通过CSS动画或JavaScript动态操作DOM元素实现。以下是两种常见方法：

CSS动画方案

<template>
  <div class="scroll-container">
    <div class="scroll-content" :style="{ animationDuration: duration + 's' }">
      <slot></slot>
      <slot></slot> <!-- 复制一份内容实现无缝衔接 -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    duration: {
      type: Number,
      default: 10
    }
  }
}
</script>

<style>
.scroll-container {
  overflow: hidden;
  width: 100%;
}

.scroll-content {
  display: inline-block;
  white-space: nowrap;
  animation: scroll linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
</style>

JavaScript动态方案

<template>
  <div class="scroll-wrapper" ref="wrapper">
    <div class="scroll-content" ref="content">
      <slot></slot>
    </div>
    <div class="scroll-content" ref="contentCopy"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      const content = this.$refs.content
      const copy = this.$refs.contentCopy
      copy.innerHTML = content.innerHTML

      let distance = 0
      const speed = 1
      const wrapperWidth = this.$refs.wrapper.offsetWidth

      setInterval(() => {
        distance -= speed
        if (distance <= -content.offsetWidth) {
          distance = 0
        }
        content.style.transform = `translateX(${distance}px)`
        copy.style.transform = `translateX(${distance + content.offsetWidth}px)`
      }, 16)
    })
  }
}
</script>

<style>
.scroll-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.scroll-content {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
}
</style>

使用第三方库实现

对于更复杂的需求，可以考虑使用专门的无缝滚动库：

npm install vue-seamless-scroll

使用示例：

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

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      listData: [
        { title: '内容1' },
        { title: '内容2' },
        // ...
      ],
      option: {
        direction: 1,
        limitMoveNum: 5,
        step: 1,
        hoverStop: true,
        interval: 1000
      }
    }
  }
}
</script>