当前位置：首页 > VUE

vue实现无缝滚动

2026-03-09 00:58:11VUE

vue实现无缝滚动的方法

无缝滚动是常见的UI效果，可以通过多种方式实现。以下是几种常见的Vue实现方法：

使用CSS动画实现

通过CSS的@keyframes和animation属性可以实现简单的无缝滚动效果。这种方法适合纯文本或简单元素的无缝滚动。

<template>
  <div class="scroll-container">
    <div class="scroll-content">{{ content }}</div>
  </div>
</template>

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

.scroll-content {
  display: inline-block;
  animation: scroll 10s linear infinite;
}

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

使用Vue的transition组件

结合Vue的transition组件和动态数据绑定，可以实现更灵活的无缝滚动效果。

<template>
  <div class="scroll-wrapper">
    <transition-group name="scroll" tag="div" class="scroll-items">
      <div v-for="(item, index) in items" :key="index" class="item">
        {{ item }}
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
    }
  },
  mounted() {
    setInterval(() => {
      this.items.push(this.items.shift())
    }, 1000)
  }
}
</script>

<style>
.scroll-wrapper {
  overflow: hidden;
  height: 50px;
}

.scroll-items {
  display: flex;
  flex-direction: column;
}

.scroll-enter-active,
.scroll-leave-active {
  transition: all 0.5s;
}

.scroll-enter {
  transform: translateY(100%);
}

.scroll-leave-to {
  transform: translateY(-100%);
}
</style>

使用第三方库vue-seamless-scroll

对于更复杂的需求，可以使用专门的无缝滚动Vue组件库。

安装依赖：

npm install vue-seamless-scroll

使用示例：

<template>
  <vue-seamless-scroll 
    :data="listData" 
    :class-option="option" 
    class="seamless-warp"
  >
    <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: 'Item 1' },
        { title: 'Item 2' },
        { title: 'Item 3' }
      ],
      option: {
        direction: 1,
        step: 0.5,
        limitMoveNum: 5,
        hoverStop: true,
        singleHeight: 30,
        waitTime: 1000
      }
    }
  }
}
</script>

<style>
.seamless-warp {
  height: 200px;
  overflow: hidden;
}
</style>

使用JavaScript实现动态滚动

通过JavaScript定时器和动态样式调整，可以实现自定义的无缝滚动效果。

vue实现无缝滚动

<template>
  <div ref="scrollContainer" class="scroll-container">
    <div ref="scrollContent" class="scroll-content">
      <div v-for="(item, index) in items" :key="index" class="item">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Content 1', 'Content 2', 'Content 3', 'Content 4'],
      scrollSpeed: 1,
      animationId: null
    }
  },
  mounted() {
    this.startScrolling()
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId)
  },
  methods: {
    startScrolling() {
      const container = this.$refs.scrollContainer
      const content = this.$refs.scrollContent

      const scroll = () => {
        if (container.scrollLeft >= content.scrollWidth - container.clientWidth) {
          container.scrollLeft = 0
        } else {
          container.scrollLeft += this.scrollSpeed
        }
        this.animationId = requestAnimationFrame(scroll)
      }

      scroll()
    }
  }
}
</script>

<style>
.scroll-container {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  scroll-behavior: smooth;
}

.scroll-content {
  display: inline-block;
}

.item {
  display: inline-block;
  padding: 0 20px;
}
</style>