微信小程序 - (广告、优惠券)弹出与关闭

哒不溜-w

于 2022-03-23 17:59:19 发布

阅读量5.7k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序 css

本文链接：https://blog.csdn.net/weixin_43825761/article/details/123691858

版权

微信小程序专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在微信小程序中创建一个广告弹窗，并通过点击X按钮关闭它。示例代码展示了WXML、WXSS和JS文件的实现细节，包括弹窗的布局、样式设置以及事件绑定来控制弹窗的显示和关闭。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍一个简单的案例，广告的弹出与关闭，页面如下：
只看弹出，其它别在意
点 x 按钮，页面关闭(x按钮可改变颜色)

b 话少说，上代码：

设置大view高宽为屏幕大小，fixed定位，透明居最外层，用isSuccess控制此view显示还是消失
设置里面的图片居中
给一个事件bindtap为close,当点击时，isSuccess从false转为true

<!-- .wxml 弹出领券框 -->
<view class="pup-up-coupon" wx:if='{{isSuccess}}'>
    <icon bindtap="closePupCoupon" class="icon-small close-icon" type="cancel" color="gray" size="25"/>
  <image src="https://s2.hdslb.com/bfs/static/blive/blfe-message-web/static/img/nodata.4d721f9d.png">
  </image>
</view>

/* .wxss */
.pup-up-coupon{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
.pup-up-coupon image{ /* 设不设都行 */	
  width: 450rpx;
  height: 450rpx;
}
.pup-up-coupon .close-icon{
  position: absolute;
  right: 120rpx;
  top: 200rpx;
}

/* .js */
Page({ 
  /**
   * 页面的初始数据
   */
  data: {
    isSuccess:true
  },
  /**
   * 关闭弹出框
   */
  closePupCoupon: function () {
    this.setData({
      isSuccess: false
    })
  },
})