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

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

浏览量:563 时间: 来源:心中有大牛

最近一直忙着修改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

})

},

自定义弹框想怎么用怎么用  哈哈哈。。。

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎