E企盈营销工具技术服务商 热线:4006-838-530

微信小程序自定义showmodal弹出框

E企盈直播平台营销卖货系统

最近一直忙着修改bug 增加新功能,好久没总结了,也不知道该总结啥,先写一个自定义showmodal框吧废话少说直接上代码wxml部分view class=”mask” catchtouchmove=”preventTouchMove” wx:if=”{{showModal}}”/viewview class=”modalDlg” wx:if=”{{showModal}}”view class=’img_wrap’image src=’http://pbqyqto63.bkt.clouddn.com/%E9%92%BB%E7%9F%B3.png’/image/viewview class=’useralert_huiyuan'{{uservip}}/viewview class=’useralert_quanyi’享受以下会员权益/viewview class=’fenggexian’/viewview class=’vipinfo'{{vipinfo}}/viewview class=’shutalert’ bindtap=”go”image src=’http://pbqyqto63.bkt.clouddn.com/%E9%94%99%E5%8F%B7.png’/image/view/viewwxss部分.mask{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000;z-index: 9000;opacity: 0.7;}.modalDlg{width: 550rpx;height: 520rpx;position: fixed;top: 25%;z-index: 9999;margin: 0rpx 100rpx 185rpx 100rpx;background-color: #fff;border-radius: 36rpx;display: flex;flex-direction: column;align-items: center;}其中 mask 是遮罩层样式modalDlg是弹出去的容器样式其他的就是很随意的,自己想写什么写什么。.img_wrap{width: 130rpx;height: 130rpx;background: white;border-radius:50%;border:1px solid #0097ff;margin: 0rpx auto;position: absolute;top: -65rpx;margin-bottom: 30rpx;}.img_wrap image{width: 100rpx;height: 100rpx;padding-top:15rpx;padding-left:15rpx;margin: 0rpx auto;}.useralert_huiyuan{font-size: 13px;margin-top: 100rpx;}.useralert_quanyi{font-size: 13px;color: darkgray;}.fenggexian{width: 100%;margin-top: 50rpx;border-bottom:1px solid #e8e8e8;}.vipinfo{margin-top: 30rpx;color: #6698ff;font-size: 11px;} .shutalert{width: 110rpx;margin: 0rpx auto}.shutalert image{width: 100rpx;height: 100rpx;position: absolute;bottom: -120rpx;}其中 mask 是遮罩层样式modalDlg是弹出去的容器样式其他的就是很随意的,自己想写什么写什么。js部分在data[]里定义一个showModal : false  初始一定为false我是因为需要分开写了两个方法来控制开关,比较死板,这样的submit: function() {this.setData({showModal: true})},go: function() {this.setData({showModal: false})},有一种更直接的可以一个方法控制开关,也可用于mask遮罩层,点击遮罩层,关闭在此我随意写下在data里定义一个showalert : false方法:alert: function() {var that= this;this.setData({showalert: !that.data.showalert})},自定义弹框想怎么用怎么用  哈哈哈。。。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序自定义showmodal弹出框
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏