当前位置：首页 > VUE

vue实现公告滚动

2026-01-17 07:24:25VUE

实现公告滚动的几种方法

使用CSS动画实现横向滚动

通过CSS的animation和@keyframes实现无限循环滚动效果。适用于简单的文字公告。

<template>
  <div class="notice-container">
    <div class="notice-content">{{ noticeText }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      noticeText: '这是一条重要公告，请仔细阅读。'
    }
  }
}
</script>

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

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

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

使用Vue的transition-group实现垂直滚动

适合多条公告的上下轮播效果。

<template>
  <div class="notice-box">
    <transition-group name="scroll" tag="ul">
      <li v-for="(item, index) in notices" :key="index">{{ item }}</li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notices: ['公告1：系统维护通知', '公告2：新功能上线', '公告3：用户协议更新'],
      currentIndex: 0
    }
  },
  mounted() {
    setInterval(this.scrollNotice, 2000);
  },
  methods: {
    scrollNotice() {
      this.currentIndex = (this.currentIndex + 1) % this.notices.length;
      this.notices.push(this.notices.shift());
    }
  }
}
</script>

<style>
.notice-box {
  height: 30px;
  overflow: hidden;
}

.scroll-move {
  transition: transform 0.5s ease;
}
</style>

使用第三方库vue-seamless-scroll

专业级滚动组件，支持丰富配置。

安装依赖：

npm install vue-seamless-scroll

使用示例：

vue实现公告滚动

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

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      notices: ['公告A', '公告B', '公告C']
    }
  },
  computed: {
    option() {
      return {
        direction: 1, // 0向下 1向上 2向左 3向右
        step: 0.5, // 步长
        limitMoveNum: 2, // 开始滚动的数据量
        hoverStop: true // 悬停暂停
      }
    }
  }
}
</script>

<style>
.seamless-wrap {
  height: 30px;
  overflow: hidden;
}
</style>