微信小程序自定义模态弹窗

最近发现一个比较好用的小程序自定义模态框，将其简化了一下,可以在框内放入想要的内容。

具体内容如下：

index.wxml

< view class= "btn" bindtap= "powerDrawer" data-statu= "open" >button </ view >

<!--mask-->

< view class= "drawer_screen" bindtap= "powerDrawer" data-statu= "close" wx:if= "{{showModalStatus}}" ></ view >

<!--content-->

<!--使用animation属性指定需要执行的动画-->

< view animation= "{{animationData}}" class= "drawer_box" wx:if= "{{showModalStatus}}" >

< view class= "drawer_title" >弹窗标题 </ view >

< view class= "drawer_content" >

</ view >

< view class= "btn_ok" bindtap= "powerDrawer" data-statu= "close" >确定 </ view >

</ view >

index.wxss

.btn {

width: 80% ;

padding: 20 rpx 0 ;

border-radius: 10 rpx ;

text-align: center ;

margin: 40 rpx 10% ;

background: #000 ;

color: #fff ;

}

/*mask*/

.drawer_screen {

width: 100% ;

height: 100% ;

position: fixed ;

top: 0 ;

left: 0 ;

z-index: 1000 ;

background: #000 ;

opacity: 0.5 ;

overflow: hidden ;

}

/*content*/

.drawer_box {

width: 650 rpx ;

overflow: hidden ;

position: fixed ;

top: 50% ;

left: 0 ;

z-index: 1001 ;

background: #FAFAFA ;

margin: -150px 50 rpx 0 50 rpx ;

border-radius: 3px ;

}

.drawer_title {

padding: 15px ;

font: 20px "microsoft yahei" ;

text-align: center ;

}

.drawer_content {

height: 210px ;

overflow-y: scroll ; /*超出父盒子高度可滚动*/

}

.btn_ok {

padding: 10px ;

font: 20px "microsoft yahei" ;

text-align: center ;

border-top: 1px solid #E8E8EA ;

color: #3CC51F ;

}

index.js

Page ({

data : {

showModalStatus : false

},

powerDrawer : function (e ) {

var currentStatu = e .currentTarget .dataset .statu ;

this .util (currentStatu )

},

util : function (currentStatu ) {

var animation = wx .createAnimation ({

duration : 200 ,

timingFunction : "linear" ,

delay : 0

});

this .animation = animation ;

animation .opacity ( 0 ).rotateX (- 100 ).step ();

this .setData ({

animationData : animation .export ()

})

setTimeout ( function () {

animation .opacity ( 1 ).rotateX ( 0 ).step ();

this .setData ({

animationData : animation

})

if (currentStatu == "close" ) {

this .setData (

{

showModalStatus : false

}

);

}

}.bind ( this ), 200 )

if (currentStatu == "open" ) {

this .setData (

{

showModalStatus : true

}

);

}

}

})

博客原文：http://blog.csdn.net/michael_ouyang。 https://blog.csdn.net/michael_ouyang/article/details/62430905

转载于:https://www.cnblogs.com/qiuxiaojian/p/9403221.html