当前位置：首页 > VUE

Vue实现几行滚动

2026-01-14 05:27:39VUE

Vue实现多行滚动效果

实现多行滚动效果可以通过CSS结合Vue的动态绑定完成。以下是几种常见实现方式：

CSS动画实现

<template>
  <div class="scroll-container">
    <div class="scroll-content" :style="{ animationDuration: duration + 's' }">
      <!-- 需要滚动的内容 -->
      <p v-for="(item, index) in items" :key="index">{{ item }}</p>
    </div>
  </div>
</template>

<style>
.scroll-container {
  height: 150px;
  overflow: hidden;
  position: relative;
}

.scroll-content {
  animation: scroll linear infinite;
}

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

JavaScript控制滚动

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

<script>
export default {
  data() {
    return {
      offset: 0,
      items: ['内容1', '内容2', '内容3', '内容4'],
      timer: null
    }
  },
  mounted() {
    this.startScroll()
  },
  methods: {
    startScroll() {
      const wrapperHeight = this.$refs.wrapper.clientHeight
      const contentHeight = this.$refs.wrapper.firstChild.clientHeight

      this.timer = setInterval(() => {
        this.offset -= 1
        if (Math.abs(this.offset) >= contentHeight - wrapperHeight) {
          this.offset = 0
        }
      }, 30)
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

使用第三方库 安装vue-seamless-scroll：

npm install vue-seamless-scroll

实现代码：

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

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      list: ['内容1', '内容2', '内容3', '内容4'],
      option: {
        direction: 1,
        limitMoveNum: 3
      }
    }
  }
}
</script>