微信小程序 首页的广告弹窗，只加载一次

### 微信小程序首页滑动弹窗效果 为了实现在微信小程序首页展示三个活动的滑动弹窗效果，可以采用 `swiper` 组件来创建可水平滚动的内容区域。此组件非常适合用于轮播图或类似的交互体验。 #### 创建 Swiper 组件布局 首先，在 WXML 文件中定义 swiper 结构： ```xml <view class="container"> <!-- 弹窗遮罩层 --> <view class="mask" wx:if="{{showModal}}" bindtap="hideModal"></view> <!-- 活动弹窗 --> <view class="modal-content" wx:if="{{showModal}}"> <swiper indicator-dots="{{true}}" autoplay="{{false}}" interval="5000" duration="1000"> <swiper-item> <image src="/images/activity1.jpg" mode="aspectFill"/> </swiper-item> <swiper-item> <image src="/images/activity2.jpg" mode="aspectFill"/> </swiper-item> <swiper-item> <image src="/images/activity3.jpg" mode="aspectFill"/> </swiper-item> </swiper> <!-- 关闭按钮 --> <button type="default" size="mini" bindtap="hideModal">关闭</button> </view> </view> ``` #### 控制显示逻辑 接着，在 JS 文件里管理模态框的状态变化： ```javascript Page({ data: { showModal: false, // 默认隐藏弹窗 }, onLoad() { setTimeout(() => this.setData({ showModal: true }), 1000); // 页面加载后延迟一秒显示弹窗 }, hideModal() { this.setData({ showModal: false }); } }) ``` #### 添加样式美化 最后，在 WXSS 中设置一些基本样式使界面更美观： ```css /* 遮罩 */ .mask { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, .7); } .modal-content { width: 80%; height: auto; max-height: calc(100vh - 40rpx); overflow-y: hidden; margin: auto; border-radius: 10rpx; padding-bottom: 20rpx; box-shadow: 0 0 10rpx #ccc; z-index: 999; /* 居中定位 */ position: absolute; top: 50%; transform: translateY(-50%); } ``` 上述代码实现了当用户打开首页时会自动弹出一个包含三张图片（代表不同活动）的滑动窗口[^1]。 用户可以通过点击背景或其他指定位置关闭该弹窗[^2]。