更新记录

1.0.0（2025-08-30） 下载此版本

1. 动画效果： 广告弹出时从底部滑入，带有平滑过渡动画 关闭时从底部滑出，保持视觉连贯性 广告标签带有呼吸动画，增强吸引力
2. 关闭机制： 支持手动点击右上角关闭按钮关闭 自动倒计时关闭（默认 5 秒），提升用户体验 点击广告外部遮罩层也可关闭
3. 交互功能： 点击广告图片或按钮可跳转到指定页面 跳转前会先关闭广告并等待动画完成 按钮点击有缩放反馈
4. 多端适配： 适配不同屏幕尺寸，广告图片保持全屏显示 支持底部安全区域适配（iPhone 等设备） 兼容 H5、微信小程序和 App

平台兼容性

uni-app(4.07)

uni-app x(4.07)

#通用商城霸屏广告组件

开发文档参考：https://hx.dcloud.net.cn

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

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

触发方式：

本插件中的首页商城为固定图片，点击图片任意位置将触发霸屏广告；

动画效果：

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

关闭机制：

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

交互功能：

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

多端适配：

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

使用方法 确保项目中已安装 UniUI 组件库，如未安装可执行：

npm install @dcloudio/uni-ui

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

vue

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

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