uniapp首页弹窗广告组件代码

使用uniapp实现一个可以叠加的首页广告弹窗组件，并要求每个用户每天只弹出一次广告。在回答用户之前，我首先介绍了uniapp的全局缓存来实现广告数据存储。具体来说，我们可以将广告数据存储在Vue实例的$data里，这样可以保证整个应用都可以访问它。比如：

Vue.prototype.$adData = {
  ads: [
    {
      image: 'url-to-image1',
      link: 'http://link-to-ad1.com'
    },
    {
      image: 'url-to-image2',
      link: 'http://link-to-ad2.com'
    },
    // more ads here
  ]
}

// 判断当前用户今天是否已经看过广告
const hasShownAd = uni.getStorageSync('hasShownAdToday') || false
if(hasShownAd) {
  // 已经看过广告了，不再展示
} else {
  // 未看过广告，展示广告
  // ...
  // 记得在展示广告后，将 hasShownAd 设置为 true 并存储到本地缓存中
  uni.setStorageSync('hasShownAdToday', true)
}

<template>
  <div class="advert">
    <img :src="adData[index].image" @click="navigateTo(adData[index].link)">
  </div>
</template>

<script>
export default {
  props: {
    adData: { // 广告数据
      type: Array,
      default: () => []
    },
    delay: { // 弹窗展示延迟时间
      type: Number,
      default: 3000 // 默认延迟3秒
    },
    duration: { // 弹窗展示时长（毫秒）
      type: Number,
      default: 5000 // 默认展示5秒
    }
  },
  data() {
    return {
      index: 0, // 当前展示的广告索引
      timer: null // 定时器
    }
  },
  mounted() {
    if(this.adData && this.adData.length) {
      this.timer = setInterval(() => {
        this.index++
        if(this.index >= this.adData.length) this.index = 0
      }, this.duration + this.delay)
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    navigateTo(link) {
      // TODO: 跳转到广告链接
    }
  }
}
</script>

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/41440.html