当前位置：首页 > VUE

vue实现数据滚动显示

2026-02-23 07:11:57VUE

Vue 实现数据滚动显示的方法

使用 CSS 动画实现滚动

通过 CSS 的 animation 和 @keyframes 实现垂直或水平滚动效果。适用于静态数据列表的无限滚动展示。

<template>
  <div class="scroll-container">
    <div 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: ['数据1', '数据2', '数据3', '数据4', '数据5']
    }
  }
}
</script>

<style>
.scroll-container {
  height: 100px;
  overflow: hidden;
}

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

@keyframes scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

.item {
  height: 20px;
  line-height: 20px;
}
</style>

使用 JavaScript 定时器动态更新数据

通过 setInterval 动态修改数据实现滚动效果。适用于需要动态更新数据的场景。

<template>
  <div class="scroll-box">
    <div v-for="(item, index) in visibleItems" :key="index">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allItems: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
      visibleItems: [],
      currentIndex: 0
    }
  },
  mounted() {
    this.visibleItems = this.allItems.slice(0, 3)
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.allItems.length
      this.visibleItems = [
        ...this.allItems.slice(this.currentIndex),
        ...this.allItems.slice(0, this.currentIndex)
      ].slice(0, 3)
    }, 1000)
  }
}
</script>

使用第三方库 vue-seamless-scroll

专门为 Vue 设计的无缝滚动组件，提供丰富的配置选项。

安装：

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.title }}
      </li>
    </ul>
  </vue-seamless-scroll>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      list: [
        { title: '内容1' },
        { title: '内容2' },
        { title: '内容3' }
      ],
      option: {
        direction: 1, // 0向下 1向上 2向左 3向右
        step: 0.5, // 步长
        limitMoveNum: 2, // 开始滚动的数据量
        hoverStop: true // 悬停暂停
      }
    }
  }
}
</script>

实现表格数据横向滚动

针对表格数据的横向滚动展示，结合 CSS 和 JavaScript 实现。

<template>
  <div class="table-scroll" ref="scrollContainer">
    <table>
      <tr>
        <td v-for="(item, index) in tableData" :key="index">
          {{ item }}
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: ['列1', '列2', '列3', '列4', '列5', '列6']
    }
  },
  mounted() {
    const container = this.$refs.scrollContainer
    let scrollAmount = 0
    setInterval(() => {
      scrollAmount += 1
      if (scrollAmount >= container.scrollWidth - container.clientWidth) {
        scrollAmount = 0
      }
      container.scrollLeft = scrollAmount
    }, 50)
  }
}
</script>

<style>
.table-scroll {
  width: 300px;
  overflow-x: auto;
  white-space: nowrap;
}
table {
  width: max-content;
}
td {
  padding: 0 20px;
}
</style>