商城、电商类 App 或小程序首页霸屏广告插件

本插件是一个基于 UniApp 和 Vue3 实现的点击弹出霸屏广告功能组件，具有流畅的过渡动画、倒计时关闭和点击跳转等功能，适配多端运行环境。

功能说明

这个霸屏广告组件具有以下特点：

1. 触发方式：通过一个醒目的按钮触发广告弹窗，按钮包含图标和文字提示

2. 动画效果：

   • 广告弹出时从底部滑入，带有平滑过渡动画
   • 关闭时从底部滑出，保持视觉连贯性
   • 广告标签带有呼吸动画，增强吸引力

3. 关闭机制：

   • 支持手动点击右上角关闭按钮关闭
   • 自动倒计时关闭（默认 5 秒），提升用户体验
   • 点击广告外部遮罩层也可关闭

4. 交互功能：

   • 点击广告图片或按钮可跳转到指定页面
   • 跳转前会先关闭广告并等待动画完成
   • 按钮点击有缩放反馈

5. 多端适配：

   • 适配不同屏幕尺寸，广告图片保持全屏显示
   • 支持底部安全区域适配（iPhone 等设备）
   • 兼容 H5、微信小程序和 App

使用方法

1. 确保项目中已安装 UniUI 组件库，如未安装可执行：

bash

npm install @dcloudio/uni-ui

 

2. 在需要使用广告的页面中引入该组件：

<template>
  <view>
    <!-- 其他页面内容 -->
    <FullScreenAd />
  </view>
</template>

<script setup>
import FullScreenAd from '@/components/FullScreenAd.vue';
</script>

 

3. 可根据需求修改组件中的广告内容配置，如图片地址、标题、描述和跳转链接等。

该组件设计简洁但功能完整，可直接用于商城、电商类 App 或小程序中，作为推广活动的高效展示方式。