当前位置：首页 > VUE

vue中实现消息滚动

2026-01-20 03:56:16VUE

Vue 中实现消息滚动的方法

使用 CSS 动画实现滚动

通过 CSS 的 animation 和 @keyframes 实现消息的平滑滚动效果。

<template>
  <div class="scroll-container">
    <div class="scroll-content">{{ message }}</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(100%); }
  100% { transform: translateX(-100%); }
}
</style>

使用 JavaScript 动态控制滚动

通过 Vue 的 ref 和 JavaScript 定时器动态控制消息的滚动。

<template>
  <div class="scroll-container" ref="scrollContainer">
    <div class="scroll-content" ref="scrollContent">{{ message }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "这是一条需要滚动的消息",
      scrollPosition: 0
    };
  },
  mounted() {
    this.startScrolling();
  },
  methods: {
    startScrolling() {
      setInterval(() => {
        this.scrollPosition -= 1;
        this.$refs.scrollContent.style.transform = `translateX(${this.scrollPosition}px)`;
        if (this.scrollPosition < -this.$refs.scrollContent.offsetWidth) {
          this.scrollPosition = this.$refs.scrollContainer.offsetWidth;
        }
      }, 20);
    }
  }
};
</script>

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

.scroll-content {
  display: inline-block;
}
</style>

使用第三方库实现滚动

借助第三方库如 vue-seamless-scroll 快速实现消息滚动效果。

安装依赖：

npm install vue-seamless-scroll

使用示例：

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

<script>
import vueSeamlessScroll from 'vue-seamless-scroll';
export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      messages: ["消息1", "消息2", "消息3"],
      options: {
        direction: 1, // 0向下，1向上，2向左，3向右
        step: 1, // 步长
        limitMoveNum: 2, // 可视区域数量
        hoverStop: true // 悬停停止
      }
    };
  }
};
</script>

实现垂直滚动效果

通过调整 CSS 和 JavaScript 逻辑实现垂直方向的消息滚动。

vue中实现消息滚动

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

<script>
export default {
  data() {
    return {
      messages: ["消息1", "消息2", "消息3"],
      scrollPosition: 0
    };
  },
  mounted() {
    this.startScrolling();
  },
  methods: {
    startScrolling() {
      setInterval(() => {
        this.scrollPosition -= 1;
        this.$refs.scrollContent.style.transform = `translateY(${this.scrollPosition}px)`;
        if (this.scrollPosition < -this.$refs.scrollContent.offsetHeight) {
          this.scrollPosition = this.$refs.scrollContainer.offsetHeight;
        }
      }, 20);
    }
  }
};
</script>

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

.vertical-scroll-content div {
  padding: 5px 0;
}
</style>

以上方法可以根据实际需求选择，CSS 动画适合简单场景，JavaScript 动态控制更灵活，第三方库则提供更多配置选项。