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

介绍一个简单的案例，广告的弹出与关闭，页面如下：

点 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})},
})

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

JAVA制作弹出小广告的程序_微信小程序实现首页弹出广告
本文实例为大家分享了微信小程序实现首页弹出广告的具体代码,供大家参考,具体内容如下这个微信小程序首页广告demo 仅供有需要的参考 .wxml this is ad //事件 catchtouchm ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
微信小程序点击弹出输入框
微信小程序点击弹出输入框第一次写博客,我决定不要太old school. let's get it!最近在学习微信开发,刚接触到微信小程序,自己尝试着做了一个简单的小程序,过程中发现类似web开发中 ...
小程序全局悬浮窗_微信小程序悬浮窗弹出怎么实现?
微信小程序悬浮窗弹出怎么实现?很多的微信小程序管理员会在微信小程序界面开发微信小程序悬浮窗弹出功能,接下来小编会为大家介绍微信小程序悬浮窗弹出关注实现的全部步骤哦. 微信小程序悬浮窗弹出怎么实现? 微 ...
【微信小程序封装底部弹出框二】
[微信小程序封装底部弹出框二]  <view><button style="margin-top: 300px;" ...
【微信小程序】底部弹出式搜索框
微信开发者工具的准备工作详见: [微信小程序]初始页面和导航栏. 设计中会使用到Vant Weapp组件库,添加组件库的方法参照官网:Vant Weapp - 轻量.可靠的小程序 UI 组件库. 注意 ...
微信小程序 - vant popup弹出层阻止底层页面滑动
前言在小程序编写过程当中使用使用vant weapp的popup组件作小程序的弹出层,触屏致使底层页面跟着滑动.web 解决方法使用touch事件阻止属性,@touchmove.stop.prev ...
微信小程序—悬浮球弹出多个item
悬浮球弹出多个item这个效果应用的场景还是挺多的,小程序中实现比较简单,思路也比较清晰,所以写这个demo不为别的,只为熟悉一下小程序的动画操作. 效果: 体验: 实现要求: 1.悬浮球固定悬浮在屏 ...
微信小程序 -- 自定义底部弹出框（带动画--滑入滑出）
实现这么一个功能,点击选项进行选择,效果是从底部弹出选项框(带滑出动画),选择了某项或者点击其他地方,隐藏(带滑出动画).效果图如下: 可适用于任何场景,如普通选项(如图)或者类似商城小程序选择商品属 ...
微信小程序弹出框竖向滚动_微信小程序解决自定义弹出层滑动时下层页面滚动问题...
WXML 将整个底层页面使用 scroll-view 包裹起来,设置 scroll-y 当显示弹出层的时候为 true, 闭关弹出层的时候为 false WXSS Page 设置为绝对定位,宽高各百分 ...

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

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

最新文章

热门文章