vue实现消息滚动

Vue 实现消息滚动的方法

使用 CSS 动画实现滚动

通过 CSS 的 animation 和 @keyframes 实现消息的平滑滚动效果。适用于简单的文字滚动需求。

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

<script>
export default {
  data() {
    return {
      message: "这是一条需要滚动的消息，可以根据需求动态更新内容。"
    };
  }
};
</script>

<style>
.scroll-container {
  width: 300px;
  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,
      scrollSpeed: 1,
      animationFrame: null
    };
  },
  mounted() {
    this.startScroll();
  },
  beforeDestroy() {
    this.stopScroll();
  },
  methods: {
    startScroll() {
      const container = this.$refs.scrollContainer;
      const content = this.$refs.scrollContent;

      const scroll = () => {
        if (this.scrollPosition >= content.offsetWidth) {
          this.scrollPosition = -container.offsetWidth;
        } else {
          this.scrollPosition += this.scrollSpeed;
        }
        content.style.transform = `translateX(-${this.scrollPosition}px)`;
        this.animationFrame = requestAnimationFrame(scroll);
      };

      this.animationFrame = requestAnimationFrame(scroll);
    },
    stopScroll() {
      if (this.animationFrame) {
        cancelAnimationFrame(this.animationFrame);
      }
    }
  }
};
</script>

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

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

使用第三方库实现高级滚动效果

如果需要更复杂的滚动效果（如无缝循环、暂停控制等），可以使用第三方库如 vue-seamless-scroll。

安装依赖：

npm install vue-seamless-scroll

使用示例：

<template>
  <vue-seamless-scroll
    :data="list"
    :class-option="option"
    class="scroll-container"
  >
    <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", "消息5"],
      option: {
        direction: 1, // 滚动方向（0：向下，1：向上，2：向左，3：向右）
        step: 1, // 步长
        limitMoveNum: 3, // 可见项数
        hoverStop: true, // 悬停暂停
        singleHeight: 30, // 单行高度
        waitTime: 1000 // 停留时间
      }
    };
  }
};
</script>

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

动态更新消息内容

通过 Vue 的响应式数据绑定动态更新消息内容，适用于需要从后端获取数据的场景。

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

<script>
export default {
  data() {
    return {
      messages: ["消息1", "消息2", "消息3"],
      currentIndex: 0,
      interval: null
    };
  },
  computed: {
    currentMessage() {
      return this.messages[this.currentIndex];
    }
  },
  mounted() {
    this.interval = setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.messages.length;
    }, 2000);
  },
  beforeDestroy() {
    clearInterval(this.interval);
  }
};
</script>

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

.scroll-content {
  display: inline-block;
  animation: fade 2s ease-in-out infinite;
}

@keyframes fade {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
</style>