小程序自定义弹出框

https://blog.csdn.net/michael_ouyang/article/details/62430905

  1. <!--button-->  
  2. <view class="btn" bindtap="powerDrawer" data-statu="open">button</view>  
  3.   
  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}}">  
  9.   
  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> 
    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. }  
    11.   
    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. }  
    24.   
    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. }  
    37.   
    38. .drawer_title{  
    39.   padding:15px;  
    40.   font: 20px "microsoft yahei";  
    41.   text-align: center;  
    42. }  
    43. .drawer_content {  
    44.   height: 210px;  
    45.   overflow-y: scroll; /*超出父盒子高度可滚动*/  
    46. }  
    47.   
    48. .btn_ok{  
    49.   padding: 10px;  
    50.   font: 20px "microsoft yahei";  
    51.   text-align: center;  
    52.   border-top: 1px solid #E8E8EA;  
    53.   color: #3CC51F;  
    54. }  
    55.   
    56. .top{  
    57.     padding-top:8px;  
    58. }  
    59. .bottom {  
    60.     padding-bottom:8px;  
    61. }  
    62. .title {  
    63.     height: 30px;  
    64.     line-height: 30px;  
    65.     width: 160rpx;  
    66.     text-align: center;  
    67.     display: inline-block;  
    68.     font: 300 28rpx/30px "microsoft yahei";  
    69. }  
    70.   
    71. .input_base {  
    72.     border: 2rpx solid #ccc;  
    73.     padding-left: 10rpx;  
    74.     margin-right: 50rpx;  
    75. }  
    76. .input_h30{  
    77.     height: 30px;  
    78.     line-height: 30px;  
    79. }  
    80. .input_h60{  
    81.     height: 60px;  
    82. }  
    83. .input_view{  
    84.     font: 12px "microsoft yahei";  
    85.     background: #fff;  
    86.     color:#000;  
    87.     line-height: 30px;  
    88. }  
    89.   
    90. input {  
    91.     font: 12px "microsoft yahei";  
    92.     background: #fff;  
    93.     color:#000 ;  
    94. }  
    95. radio{  
    96.     margin-right: 20px;  
    97. }  
    98. .grid { display: -webkit-box; display: box; }  
    99. .col-0 {-webkit-box-flex:0;box-flex:0;}  
    100. .col-1 {-webkit-box-flex:1;box-flex:1;}  
    101. .fl { float: left;}  
    102. .fr { float: right;}  
    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.     // 第1步：创建动画实例   
    12.     var animation = wx.createAnimation({  
    13.       duration: 200,  //动画时长  
    14.       timingFunction: "linear", //线性  
    15.       delay: 0  //0则不延迟  
    16.     });  
    17.       
    18.     // 第2步：这个动画实例赋给当前的动画实例  
    19.     this.animation = animation;  
    20.   
    21.     // 第3步：执行第一组动画  
    22.     animation.opacity(0).rotateX(-100).step();  
    23.   
    24.     // 第4步：导出动画对象赋给数据对象储存  
    25.     this.setData({  
    26.       animationData: animation.export()  
    27.     })  
    28.       
    29.     // 第5步：设置定时器到指定时候后，执行第二组动画  
    30.     setTimeout(function () {  
    31.       // 执行第二组动画  
    32.       animation.opacity(1).rotateX(0).step();  
    33.       // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象  
    34.       this.setData({  
    35.         animationData: animation  
    36.       })  
    37.         
    38.       //关闭  
    39.       if (currentStatu == "close") {  
    40.         this.setData(  
    41.           {  
    42.             showModalStatus: false  
    43.           }  
    44.         );  
    45.       }  
    46.     }.bind(this), 200)  
    47.     
    48.     // 显示  
    49.     if (currentStatu == "open") {  
    50.       this.setData(  
    51.         {  
    52.           showModalStatus: true  
    53.         }  
    54.       );  
    55.     }  
    56. https://blog.csdn.net/u012421719/article/details/70889542　微信小程序特殊效果合集
posted @ 2018-05-15 17:43  小毛驴  阅读(298)  评论(0)  编辑  收藏  举报