vue实现无缝播报

Vue实现无缝播报

无缝播报通常指循环滚动展示信息，常见于新闻、公告等场景。以下是基于Vue的实现方法：

使用CSS动画实现

通过CSS的@keyframes和transform实现滚动效果，结合Vue动态绑定数据。

<template>
  <div class="marquee-container">
    <div class="marquee-content" :style="animationStyle">
      {{ content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '这是一条需要无缝播报的信息',
      duration: 10 // 动画持续时间（秒）
    }
  },
  computed: {
    animationStyle() {
      return {
        animation: `marquee ${this.duration}s linear infinite`
      }
    }
  }
}
</script>

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

.marquee-content {
  display: inline-block;
  padding-left: 100%;
}

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

使用定时器实现

通过JavaScript定时器动态更新内容位置，实现更灵活的控制。

<template>
  <div class="marquee" ref="marquee">
    <div class="content" :style="{ left: position + 'px' }">
      {{ content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '这是一条需要无缝播报的信息',
      position: 0,
      speed: 1,
      requestId: null
    }
  },
  mounted() {
    this.startAnimation()
  },
  beforeDestroy() {
    cancelAnimationFrame(this.requestId)
  },
  methods: {
    startAnimation() {
      const animate = () => {
        this.position -= this.speed
        if (Math.abs(this.position) > this.$refs.marquee.offsetWidth) {
          this.position = this.$refs.marquee.offsetWidth
        }
        this.requestId = requestAnimationFrame(animate)
      }
      animate()
    }
  }
}
</script>

<style>
.marquee {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  height: 20px;
}

.content {
  position: absolute;
}
</style>

使用第三方库

vue-marquee-text-component是一个专门实现跑马灯效果的Vue组件。

安装：

npm install vue-marquee-text-component

使用：

<template>
  <marquee-text :duration="5" :repeat="Infinity">
    {{ content }}
  </marquee-text>
</template>

<script>
import MarqueeText from 'vue-marquee-text-component'

export default {
  components: {
    MarqueeText
  },
  data() {
    return {
      content: '这是一条需要无缝播报的信息'
    }
  }
}
</script>

多内容循环播报

对于多条信息循环显示的情况，可以结合定时器和过渡效果实现。

<template>
  <div class="news-container">
    <transition name="fade" mode="out-in">
      <div :key="currentIndex" class="news-item">
        {{ newsList[currentIndex] }}
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newsList: [
        '第一条新闻',
        '第二条公告',
        '第三条消息'
      ],
      currentIndex: 0,
      interval: null
    }
  },
  mounted() {
    this.interval = setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.newsList.length
    }, 3000)
  },
  beforeDestroy() {
    clearInterval(this.interval)
  }
}
</script>

<style>
.news-container {
  height: 20px;
  overflow: hidden;
  position: relative;
}

.news-item {
  position: absolute;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

以上方法可根据实际需求选择，CSS动画性能较好但控制不够灵活，JavaScript实现更可控但需要注意性能优化，第三方库则提供了开箱即用的解决方案。