用户
 找回密码
 立即注册

QQ登录

只需一步，快速开始

扫一扫，登录网站

搜索
小程序社区 › 首页 › 教程› 实战教程 › 查看内容

michael：微信小程序之自定义模态弹窗（带动画）实例

天下雪 2017-3-17 00:12

8327

作者：michael_ouyang，来自授权地址首先看看官方提供的模态弹窗api如下：示例：这样的模态弹窗，充其量只能做个alert，提示一下信息。但是并不能使用它来处理复杂性的弹窗业务，因此写了Michael从新自定义了一个， ...

作者：michael_ouyang，来自授权地址 
首先看看官方提供的模态弹窗 

api如下： 

 
示例： 

 
这样的模态弹窗，充其量只能做个alert，提示一下信息。 
但是并不能使用它来处理复杂性的弹窗业务，因此写了Michael从新自定义了一个，采用了仿原生的样式写法

wxml：

  1. <!--button-->  
  2. <view class="btn" bindtap="powerDrawer" data-statu="open">button</view>  
  4. <!--mask-->  
  5. <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>  
  6. <!--content-->  
  7. <!--使用animation属性指定需要执行的动画-->  
  8. <view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">  
  10.   <!--drawer content-->  
  11.   <view class="drawer_title">弹窗标题</view>  
  12.   <view class="drawer_content">  
  13.     <view class="top grid">  
  14.       <label class="title col-0">标题</label>  
  15.       <input class="input_base input_h30 col-1" name="rName" value="可自行定义内容"></input>  
  16.     </view>  
  17.     <view class="top grid">  
  18.       <label class="title col-0">标题</label>  
  19.       <input class="input_base input_h30 col-1" name="mobile" value="110"></input>  
  20.     </view>  
  21.     <view class="top grid">  
  22.       <label class="title col-0">标题</label>  
  23.       <input class="input_base input_h30 col-1" name="phone" value="拒绝伸手党"></input>  
  24.     </view>  
  25.     <view class="top grid">  
  26.       <label class="title col-0">标题</label>  
  27.       <input class="input_base input_h30 col-1" name="Email" value="仅供学习使用"></input>  
  28.     </view>  
  29.     <view class="top bottom grid">  
  30.       <label class="title col-0">备注</label>  
  31.       <input class="input_base input_h30 col-1" name="bz"></input>  
  32.     </view>  
  33.   </view>  
  34.   <view class="btn_ok" bindtap="powerDrawer" data-statu="close">确定</view>  
  35. </view>

wxss：

  1. /*button*/  
  2. .btn {  
  3.   width: 80%;  
  4.   padding: 20rpx 0;  
  5.   border-radius: 10rpx;  
  6.   text-align: center;  
  7.   margin: 40rpx 10%;  
  8.   background: #000;  
  9.   color: #fff;  
  10. }  
  12. /*mask*/  
  13. .drawer_screen {  
  14.   width: 100%;  
  15.   height: 100%;  
  16.   position: fixed;  
  17.   top: 0;  
  18.   left: 0;  
  19.   z-index: 1000;  
  20.   background: #000;  
  21.   opacity: 0.5;  
  22.   overflow: hidden;  
  23. }  
  25. /*content*/  
  26. .drawer_box {  
  27.   width: 650rpx;  
  28.   overflow: hidden;  
  29.   position: fixed;  
  30.   top: 50%;  
  31.   left: 0;  
  32.   z-index: 1001;  
  33.   background: #FAFAFA;  
  34.   margin: -150px 50rpx 0 50rpx;  
  35.   border-radius: 3px;  
  36. }  
  38. .drawer_title{  
  39.   padding:15px;  
  40.   font: 20px "microsoft yahei";  
  41.   text-align: center; 
                 
                邀请 
              
     
               
              
     
            
             
                        
     
              
    

    


鲜花
    
                鲜花                (1)
    
    		



鸡蛋
    
                鸡蛋                (1)
    
    		

    

    



    
刚表态过的朋友 (2 人)

    


 
            
    
            
    

    
分享至 :


QQ空间

    


收藏

    
            
     
                        
     
              ETL：微信小程序之图片上传 
              微信小程序实例：美女图集：调用远程API获取图片及保存 
            
    
             
            
    
                  原作者: michael_ouyang 
                  来自: 授权地址 
                   
                   
                              
    
            
    

     
            
                        
    
              
    
                
    相关阅读
    
              
    
              
    
                
              
    
            
    
             
            
          
          
     
        
      
       
       
      
    
  
     
    1 条回复
  
    
  
     
    
     
     
    
      
  
    

    
        
    
    
    
     
    

    

    


    

    
                
    



    		


    









                
    

    
           
    
    
    
    
    
    

   
    
         

    
    
 
       
      
     
    
  
  
    
    
    
    
     
      
    

    推荐阅读
    

    

    

      

      

      

      最新Demo