您好,登录后才能下订单哦!
小编给大家分享一下小程序中怎么自定义showmodal弹出框,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
最近一直忙着修改bug 增加新功能,好久没总结了,也不知道该总结啥,先写一个自定义showmodal框吧
废话少说直接上代码
wxml部分
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view> <view class="modalDlg" wx:if="{{showModal}}"> <view class='img_wrap'> <image src='http://pbqyqto63.bkt.clouddn.com/%E9%92%BB%E7%9F%B3.png'></image> </view> <view class='useralert_huiyuan'>{{uservip}}</view> <view class='useralert_quanyi'>享受以下会员权益</view> <view class='fenggexian'></view> <view class='vipinfo'>{{vipinfo}}</view> <view class='shutalert' bindtap="go"> <image src='http://pbqyqto63.bkt.clouddn.com/%E9%94%99%E5%8F%B7.png'></image> </view> </view>
wxss部分
.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 }) },
以上是“小程序中怎么自定义showmodal弹出框”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。