当前位置：首页 > VUE

vue实现文字播放栏

2026-02-25 20:11:09VUE

Vue 实现文字播放栏

文字播放栏通常用于展示滚动或轮播的文字信息，常见于新闻、公告或广告等场景。以下是几种实现方式：

使用 CSS 动画实现横向滚动

通过 CSS 的 animation 和 @keyframes 实现文字横向滚动效果：

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

<script>
export default {
  data() {
    return {
      text: '这是一条需要滚动的文字信息，可以根据需求动态更新内容。'
    }
  }
}
</script>

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

.scroll-text {
  display: inline-block;
  animation: scroll 10s linear infinite;
}

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

使用定时器实现垂直轮播

通过 JavaScript 定时器控制内容的切换，适合多条信息的轮播展示：

<template>
  <div class="news-bar">
    <div class="news-item" v-for="(item, index) in newsList" 
         :key="index" v-show="currentIndex === index">
      {{ item }}
    </div>
  </div>
</template>

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

<style>
.news-bar {
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  position: relative;
}

.news-item {
  position: absolute;
  width: 100%;
  transition: all 0.5s ease;
}
</style>

使用第三方库（如 vue-seamless-scroll）

对于更复杂的需求，可以使用专门为 Vue 设计的滚动组件库：

安装依赖：
```
npm install vue-seamless-scroll
```

组件实现：


<template>
<vue-seamless-scroll 
 :data="list" 
 class="seamless-wrap"
 :class-option="option">
 <ul>
   <li v-for="(item, index) in list" :key="index">
     {{ item.title }}
   </li>
 </ul>
</vue-seamless-scroll>
</template>

import vueSeamlessScroll from 'vue-seamless-scroll' export default { components: { vueSeamlessScroll }, data() { return { list: [ { title: '第一条滚动内容' }, { title: '第二条滚动内容' }, { title: '第三条滚动内容' } ], option: { step: 0.5, // 滚动速度 limitMoveNum: 2, // 开始滚动的数据量 hoverStop: true // 悬停停止 } } } } .seamless-wrap { height: 30px; overflow: hidden; } ```