vue实现消息无缝滑动

Vue 实现消息无缝滑动

使用 CSS 动画实现无缝滚动

通过 CSS 的 @keyframes 和 animation 属性实现消息的无缝滑动效果。将消息列表包裹在一个容器中，通过动画控制其垂直或水平移动。

<template>
  <div class="message-container">
    <div class="message-list" :style="animationStyle">
      <div v-for="(message, index) in messages" :key="index" class="message-item">
        {{ message }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: ['消息1', '消息2', '消息3', '消息4', '消息5'],
      animationDuration: 10 // 动画持续时间（秒）
    };
  },
  computed: {
    animationStyle() {
      return {
        animation: `scroll ${this.animationDuration}s linear infinite`
      };
    }
  }
};
</script>

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

.message-list {
  display: inline-block;
}

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

使用 JavaScript 动态控制滚动

通过 JavaScript 动态计算消息列表的位置，实现更灵活的无缝滑动效果。适用于需要动态更新消息内容的场景。

<template>
  <div class="message-container" ref="container">
    <div class="message-list" ref="list">
      <div v-for="(message, index) in messages" :key="index" class="message-item">
        {{ message }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: ['消息1', '消息2', '消息3', '消息4', '消息5'],
      scrollSpeed: 1, // 滚动速度（像素/帧）
      animationFrameId: null
    };
  },
  mounted() {
    this.startScrolling();
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationFrameId);
  },
  methods: {
    startScrolling() {
      const container = this.$refs.container;
      const list = this.$refs.list;
      let position = 0;

      const scroll = () => {
        position -= this.scrollSpeed;
        if (position <= -list.offsetHeight) {
          position = 0;
        }
        list.style.transform = `translateY(${position}px)`;
        this.animationFrameId = requestAnimationFrame(scroll);
      };

      scroll();
    }
  }
};
</script>

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

.message-list {
  transition: transform 0.1s linear;
}
</style>

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

如果需要更复杂的效果（如平滑暂停、动态加载消息），可以使用第三方库如 vue-seamless-scroll。

安装库：

npm install vue-seamless-scroll

示例代码：

<template>
  <vue-seamless-scroll :data="messages" class="message-container">
    <div v-for="(message, index) in messages" :key="index" class="message-item">
      {{ message }}
    </div>
  </vue-seamless-scroll>
</template>

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

export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      messages: ['消息1', '消息2', '消息3', '消息4', '消息5']
    };
  }
};
</script>

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

动态更新消息列表

在消息列表动态变化时，确保无缝滑动效果不被中断。通过监听消息列表的变化，重置动画或重新计算滚动位置。

<template>
  <div class="message-container" ref="container">
    <div class="message-list" ref="list">
      <div v-for="(message, index) in messages" :key="index" class="message-item">
        {{ message }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: ['消息1', '消息2', '消息3'],
      scrollSpeed: 1,
      animationFrameId: null
    };
  },
  watch: {
    messages() {
      cancelAnimationFrame(this.animationFrameId);
      this.startScrolling();
    }
  },
  mounted() {
    this.startScrolling();
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationFrameId);
  },
  methods: {
    startScrolling() {
      const container = this.$refs.container;
      const list = this.$refs.list;
      let position = 0;

      const scroll = () => {
        position -= this.scrollSpeed;
        if (position <= -list.offsetHeight) {
          position = 0;
        }
        list.style.transform = `translateY(${position}px)`;
        this.animationFrameId = requestAnimationFrame(scroll);
      };

      scroll();
    }
  }
};
</script>

以上方法可以根据实际需求选择，CSS 动画适合简单场景，JavaScript 动态控制更灵活，第三方库则提供开箱即用的高级功能。