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

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

具体内容如下：

index.wxml

 1 <view class="btn" bindtap="powerDrawer" data-statu="open">button</view>
 2 
 3 <!--mask-->
 4 <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>
 5 <!--content-->
 6 <!--使用animation属性指定需要执行的动画-->
 7 <view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">
 8 
 9 <view class="drawer_title">弹窗标题</view>
10 <view class="drawer_content">
11 
12 </view>
13 <view class="btn_ok" bindtap="powerDrawer" data-statu="close">确定</view>
14 </view>

 

 

index.wxss

 1 .btn {
 2 width: 80%;
 3 padding: 20rpx 0;
 4 border-radius: 10rpx;
 5 text-align: center;
 6 margin: 40rpx 10%;
 7 background: #000;
 8 color: #fff;
 9 }
10 
11 /*mask*/
12 .drawer_screen {
13 width: 100%;
14 height: 100%;
15 position: fixed;
16 top: 0;
17 left: 0;
18 z-index: 1000;
19 background: #000;
20 opacity: 0.5;
21 overflow: hidden;
22 }
23 
24 /*content*/
25 .drawer_box {
26 width: 650rpx;
27 overflow: hidden;
28 position: fixed;
29 top: 50%;
30 left: 0;
31 z-index: 1001;
32 background: #FAFAFA;
33 margin: -150px 50rpx 0 50rpx;
34 border-radius: 3px;
35 }
36 
37 .drawer_title{
38 padding:15px;
39 font: 20px "microsoft yahei";
40 text-align: center;
41 }
42 .drawer_content {
43 height: 210px;
44 overflow-y: scroll; /*超出父盒子高度可滚动*/
45 }
46 
47 .btn_ok{
48 padding: 10px;
49 font: 20px "microsoft yahei";
50 text-align: center;
51 border-top: 1px solid #E8E8EA;
52 color: #3CC51F;
53 }

 

 

index.js

 1 Page({
 2 data: {
 3 showModalStatus: false
 4 },
 5 powerDrawer: function (e) {
 6 var currentStatu = e.currentTarget.dataset.statu;
 7 this.util(currentStatu)
 8 },
 9 util: function (currentStatu) {
10 
11 var animation = wx.createAnimation({
12 duration: 200,
13 timingFunction: "linear",
14 delay: 0
15 });
16 this.animation = animation;
17 animation.opacity(0).rotateX(-100).step();
18 this.setData({
19 animationData: animation.export()
20 })
21 
22 
23 setTimeout(function () {
24 animation.opacity(1).rotateX(0).step();
25 this.setData({
26 animationData: animation
27 })
28 if (currentStatu == "close") {
29 this.setData(
30 {
31 showModalStatus: false
32 }
33 );
34 }
35 }.bind(this), 200)
36 if (currentStatu == "open") {
37 this.setData(
38 {
39 showModalStatus: true
40 }
41 );
42 }
43 }
44 
45 })

 

 

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

 

posted @ 2018-05-06 23:46  邱小健  阅读(759)  评论(0)  编辑  收藏  举报