vue实现公告滚动

Vue实现公告滚动的方法

使用CSS动画实现横向滚动

通过CSS的animation和@keyframes实现横向滚动效果，结合Vue的数据绑定动态更新公告内容。

<template>
  <div class="announcement-container">
    <div class="announcement-content">
      {{ announcementText }}
    </div>
  </div>
</template>

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

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

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

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

使用Vue的定时器实现纵向滚动

通过JavaScript的setInterval定时更新显示的内容，实现纵向滚动效果。

<template>
  <div class="announcement-list">
    <div 
      v-for="(item, index) in visibleItems" 
      :key="index"
      class="announcement-item"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      announcements: [
        '公告1：系统将于今晚进行维护',
        '公告2：新功能已上线',
        '公告3：注意事项提醒'
      ],
      currentIndex: 0,
      visibleCount: 1
    }
  },
  computed: {
    visibleItems() {
      return this.announcements.slice(
        this.currentIndex, 
        this.currentIndex + this.visibleCount
      );
    }
  },
  mounted() {
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.announcements.length;
    }, 3000);
  }
}
</script>

<style>
.announcement-list {
  height: 30px;
  overflow: hidden;
}

.announcement-item {
  height: 30px;
  line-height: 30px;
}
</style>

使用第三方库vue-seamless-scroll

对于更复杂的需求，可以使用专门为Vue开发的滚动组件库。

安装依赖：

npm install vue-seamless-scroll

使用示例：

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

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

export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      announcements: [
        '公告1：系统维护通知',
        '公告2：版本更新内容',
        '公告3：用户须知'
      ]
    }
  }
}
</script>

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

使用transition-group实现平滑滚动

通过Vue的过渡效果实现更平滑的滚动动画。

<template>
  <div class="announcement-wrapper">
    <transition-group 
      name="scroll" 
      tag="div"
      class="announcement-box"
    >
      <div 
        v-for="item in currentItems" 
        :key="item.id"
        class="announcement-item"
      >
        {{ item.text }}
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '公告消息1' },
        { id: 2, text: '公告消息2' },
        { id: 3, text: '公告消息3' }
      ],
      currentIndex: 0
    }
  },
  computed: {
    currentItems() {
      return [this.items[this.currentIndex]];
    }
  },
  mounted() {
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.items.length;
    }, 2000);
  }
}
</script>

<style>
.announcement-wrapper {
  height: 30px;
  overflow: hidden;
  position: relative;
}

.announcement-box {
  position: absolute;
  width: 100%;
}

.announcement-item {
  height: 30px;
  line-height: 30px;
}

.scroll-enter-active, .scroll-leave-active {
  transition: all 0.5s;
}
.scroll-enter {
  transform: translateY(30px);
}
.scroll-leave-to {
  transform: translateY(-30px);
}
</style>

以上方法可以根据实际需求选择使用，CSS动画适合简单的横向滚动，定时器方法适合纵向轮播，第三方库提供了更多配置选项，而transition-group则能实现更丰富的过渡效果。