微信小程序开发实现自定义模态弹窗教程

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

具体内容如下：

index.wxml
 

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

index.wxss
 

1. .btn {   
2.  
3.   width: 80%;   
4.  
5.   padding: 20rpx 0;   
6.  
7.   border-radius: 10rpx;   
8.  
9.   text-align: center;   
10.  
11.   margin: 40rpx 10%;   
12.  
13.   background: #000;   
14.  
15.   color: #fff;   
16.  
17. }   
18.  
19. /*mask*/   
20.  
21. .drawer_screen {   
22.  
23.   width: 100%;   
24.  
25.   height: 100%;   
26.  
27.   position: fixed;   
28.  
29.   top: 0;   
30.  
31.   left: 0;   
32.  
33.   z-index: 1000;   
34.  
35.   background: #000;   
36.  
37.   opacity: 0.5;   
38.  
39.   overflow: hidden;   
40.  
41. }   
42.  
43. /*content*/   
44.  
45. .drawer_box {   
46.  
47.   width: 650rpx;   
48.  
49.   overflow: hidden;   
50.  
51.   position: fixed;   
52.  
53.   top: 50%;   
54.  
55.   left: 0;   
56.  
57.   z-index: 1001;   
58.  
59.   background: #FAFAFA;   
60.  
61.   margin: -150px 50rpx 0 50rpx;   
62.  
63.   border-radius: 3px;   
64.  
65. }   
66.  
67. .drawer_title{   
68.  
69.   padding:15px;   
70.  
71.   font: 20px "microsoft yahei";   
72.  
73.   text-align: center;   
74.  
75. }   
76.  
77. .drawer_content {   
78.  
79.   height: 210px;   
80.  
81.   overflow-y: scroll; /*超出父盒子高度可滚动*/   
82.  
83. }   
84.  
85. .btn_ok{   
86.  
87.   padding: 10px;   
88.  
89.   font: 20px "microsoft yahei";   
90.  
91.   text-align: center;   
92.  
93.   border-top: 1px solid #E8E8EA;   
94.  
95.   color: #3CC51F;   
96.  
97. }   

index.js
 

1. Page({ 
2.  
3.   data: { 
4.  
5.     showModalStatus: false 
6.  
7.   }, 
8.  
9.   powerDrawer: function (e) { 
10.  
11.     var currentStatu = e.currentTarget.dataset.statu; 
12.  
13.     this.util(currentStatu) 
14.  
15.   }, 
16.  
17.   util: function (currentStatu) { 
18.  
19.     var animation = wx.createAnimation({ 
20.  
21.       duration: 200, 
22.  
23.       timingFunction: "linear",  
24.  
25.       delay: 0   
26.  
27.     }); 
28.  
29.     this.animation = animation; 
30.  
31.     animation.opacity(0).rotateX(-100).step(); 
32.  
33.     this.setData({ 
34.  
35.       animationData: animation.export() 
36.  
37.     }) 
38.  
39.     setTimeout(function () { 
40.  
41.       animation.opacity(1).rotateX(0).step(); 
42.  
43.       this.setData({ 
44.  
45.         animationData: animation 
46.  
47.       }) 
48.  
49.       if (currentStatu == "close") { 
50.  
51.         this.setData( 
52.  
53.           { 
54.  
55.             showModalStatus: false 
56.  
57.           } 
58.  
59.         ); 
60.  
61.       } 
62.  
63.     }.bind(this), 200) 
64.  
65.     if (currentStatu == "open") { 
66.  
67.       this.setData( 
68.  
69.         { 
70.  
71.           showModalStatus: true 
72.  
73.         } 
74.  
75.       ); 
76.  
77.     } 
78.  
79.   } 
80.  
81. })