vue 组件水平滚动_vue实现文字横向无缝走马灯组件效果的实例代码

以下是一个简单的 Vue 组件实现文字横向无缝走马灯效果的实例代码：

<template>
  <div class="marquee">
    <div class="marquee-inner" ref="marquee">
      <slot></slot>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Marquee',
  data() {
    return {
      animationId: null,
      speed: 1,
      offset: 0,
      innerWidth: 0,
      marqueeWidth: 0
    }
  },
  mounted() {
    this.startAnimation()
  },
  beforeDestroy() {
    this.stopAnimation()
  },
  methods: {
    startAnimation() {
      this.animationId = requestAnimationFrame(this.animate.bind(this))
    },
    stopAnimation() {
      cancelAnimationFrame(this.animationId)
    },
    animate() {
      this.offset -= this.speed
      if (this.offset < -this.marqueeWidth) {
        this.offset = 0
      }
      this.$refs.marquee.style.transform = `translateX(${this.offset}px)`
      this.animationId = requestAnimationFrame(this.animate.bind(this))
    },
    updateDimensions() {
      this.innerWidth = this.$refs.marquee.clientWidth
      this.marqueeWidth = this.$refs.marquee.scrollWidth
    }
  },
  mounted() {
    window.addEventListener('resize', this.updateDimensions)
    this.updateDimensions()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateDimensions)
  }
}
</script>

<style scoped>
.marquee {
  overflow: hidden;
  white-space: nowrap;
}

.marquee-inner {
  display: inline-block;
  animation: none;
}
</style>

该组件包含一个名为 `Marquee` 的 Vue 组件，它具有以下功能：

- 在组件内部包含一个具有 `marquee-inner` 类名的 div 元素，用于包含实际的滚动内容。
- 使用 `requestAnimationFrame` API 实现动画效果。
- 使用 `translateX` CSS 属性在水平方向上移动滚动内容。
- 监听窗口大小变化事件，并在更新时重新计算滚动内容的宽度。

使用该组件时，只需要将需要滚动的内容放入组件的插槽中即可：

<marquee>
  <span>这是滚动的文字1</span>
  <span>这是滚动的文字2</span>
  <span>这是滚动的文字3</span>
  <span>这是滚动的文字4</span>
</marquee>

你可以根据需要自定义组件的样式，例如设置滚动速度等。