当前位置：首页 > VUE

vue实现滚动广告

2026-02-19 23:07:35VUE

使用Vue实现滚动广告

滚动广告可以通过多种方式实现，以下是几种常见的方法：

使用CSS动画实现滚动

通过CSS的@keyframes和animation属性可以实现简单的滚动效果。在Vue中，可以将这些样式动态绑定到元素上。

<template>
  <div class="scroll-container">
    <div class="scroll-content" :style="{ animation: `scroll ${duration}s linear infinite` }">
      {{ content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '这里是滚动广告内容',
      duration: 10
    }
  }
}
</script>

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

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

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

使用JavaScript实现动态滚动

通过JavaScript动态改变元素的位置，可以实现更灵活的滚动效果。

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

<script>
export default {
  data() {
    return {
      content: '这里是滚动广告内容',
      speed: 2,
      animationId: null
    }
  },
  mounted() {
    this.startScroll()
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId)
  },
  methods: {
    startScroll() {
      const container = this.$refs.container
      const content = this.$refs.content
      let position = container.offsetWidth

      const scroll = () => {
        position -= this.speed
        if (position < -content.offsetWidth) {
          position = container.offsetWidth
        }
        content.style.transform = `translateX(${position}px)`
        this.animationId = requestAnimationFrame(scroll)
      }

      scroll()
    }
  }
}
</script>

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

.scroll-content {
  display: inline-block;
}
</style>

使用第三方库实现复杂效果

如果需要更复杂的滚动效果，可以考虑使用第三方库如vue-awesome-swiper。

安装依赖：

npm install swiper vue-awesome-swiper

使用示例：

vue实现滚动广告

<template>
  <swiper :options="swiperOptions">
    <swiper-slide v-for="(item, index) in items" :key="index">
      {{ item }}
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      items: ['广告1', '广告2', '广告3'],
      swiperOptions: {
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        loop: true
      }
    }
  }
}
</script>