当前位置：首页 > VUE

vue实现广告横幅

2026-03-08 08:56:25VUE

Vue 实现广告横幅的方法

在 Vue 中实现广告横幅可以通过多种方式完成，以下是几种常见的方法：

使用动态组件或条件渲染

通过 Vue 的 v-if 或 v-show 指令控制广告横幅的显示与隐藏。结合定时器或外部事件触发广告的切换。

<template>
  <div class="ad-banner" v-show="showBanner">
    <img :src="currentAd.image" :alt="currentAd.title" />
    <button @click="closeBanner">关闭</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showBanner: true,
      ads: [
        { image: 'ad1.jpg', title: '广告1' },
        { image: 'ad2.jpg', title: '广告2' }
      ],
      currentAdIndex: 0
    };
  },
  computed: {
    currentAd() {
      return this.ads[this.currentAdIndex];
    }
  },
  methods: {
    closeBanner() {
      this.showBanner = false;
    },
    rotateAd() {
      this.currentAdIndex = (this.currentAdIndex + 1) % this.ads.length;
    }
  },
  mounted() {
    setInterval(this.rotateAd, 5000);
  }
};
</script>

<style>
.ad-banner {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  padding: 10px;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}
</style>

使用第三方轮播库

对于更复杂的广告轮播效果，可以集成第三方库如 Swiper 或 Vue-Awesome-Swiper。

<template>
  <swiper :options="swiperOptions" class="ad-banner">
    <swiper-slide v-for="(ad, index) in ads" :key="index">
      <img :src="ad.image" :alt="ad.title" />
    </swiper-slide>
  </swiper>
</template>

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

export default {
  components: { Swiper, SwiperSlide },
  data() {
    return {
      ads: [
        { image: 'ad1.jpg', title: '广告1' },
        { image: 'ad2.jpg', title: '广告2' }
      ],
      swiperOptions: {
        autoplay: {
          delay: 3000,
        },
        loop: true
      }
    };
  }
};
</script>

响应式广告横幅

根据屏幕尺寸显示不同的广告内容或布局。

<template>
  <div class="ad-container">
    <img v-if="isMobile" src="mobile-ad.jpg" alt="移动端广告" />
    <img v-else src="desktop-ad.jpg" alt="桌面端广告" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMobile: false
    };
  },
  created() {
    this.checkScreenSize();
    window.addEventListener('resize', this.checkScreenSize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkScreenSize);
  },
  methods: {
    checkScreenSize() {
      this.isMobile = window.innerWidth < 768;
    }
  }
};
</script>

与后端API集成

从后端获取广告数据，实现动态内容加载。

vue实现广告横幅

<template>
  <div class="ad-banner" v-if="ads.length">
    <img :src="ads[0].imageUrl" :alt="ads[0].title" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      ads: []
    };
  },
  async created() {
    try {
      const response = await fetch('/api/ads');
      this.ads = await response.json();
    } catch (error) {
      console.error('获取广告失败:', error);
    }
  }
};
</script>