午夜91福利视频,午夜成人在线观看,午夜在线视频免费观看,午夜福利短视频,精品午夜成人免费视频APP

小程序模板網

michael：微信小程序之自定義模態彈窗（帶動畫）實例

發布時間：2017-12-06 17:00 所屬欄目：小程序開發教程

首先(xian)看(kan)看(kan)官(guan)方(fang)提供的模態彈窗

 

api如下：


 

示例：


這樣的模態彈窗，充其量只能做個alert，提示(shi)一下信息。

但是并不能(neng)使(shi)用(yong)它(ta)來(lai)處理復雜性的彈(dan)窗業務，因此寫了Michael從新自(zi)定(ding)義了一(yi)個(ge)，采(cai)用(yong)了仿(fang)原生的樣式寫法

 

 

wxml：

 

[html] view plain copy
 
  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. <!--使用(yong)animation屬性指定需(xu)要(yao)執行的動(dong)畫-->;  
  8. <view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">  
  9.   
  10.   <!--drawer content-->  
  11.   <view class="drawer_title">彈窗標(biao)題(ti)</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="可自行定義內(nei)容"></input>  
  16.     </view>  
  17.     <view class="top grid">  
  18.       <label class="title col-0">標題(ti)</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="僅供(gong)學習使用"></input>  
  28.     </view>  
  29.     <view class="top bottom grid">  
  30.       <label class="title col-0">備(bei)注(zhu)</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：

 

[css] view plain copy
 
  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; /*超出父(fu)盒子(zi)高度可(ke)滾動*/  
  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;}  

 

 

js：

[javascript] view plain copy
 
  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步：創建動畫(hua)實例   
  12.     var animation = wx.createAnimation({  
  13.       duration: 200,  //動畫時長  
  14.       timingFunction: "linear", //線性(xing)  
  15.       delay: 0  //0則(ze)不延遲(chi)  
  16.     });  
  17.       
  18.     // 第2步：這個動畫(hua)實例(li)賦給(gei)當前的動畫(hua)實例(li)  
  19.     this.animation = animation;  
  20.   
  21.     // 第(di)3步(bu)：執行(xing)第(di)一(yi)組動畫  
  22.     animation.opacity(0).rotateX(-100).step();  
  23.   
  24.     // 第4步：導出動(dong)畫對象賦給(gei)數據對象儲存  
  25.     this.setData({  
  26.       animationData: animation.export()  
  27.     })  
  28.       
  29.     // 第5步：設置定時器(qi)到指定時候后，執行第二組動畫  
  30.     setTimeout(function () {  
  31.       // 執(zhi)行第二組(zu)動畫  
  32.       animation.opacity(1).rotateX(0).step();  
  33.       // 給數據對(dui)象儲存的第(di)一組動畫(hua)，更替為執行完第(di)二組動畫(hua)的動畫(hua)對(dui)象  
  34.       this.setData({  
  35.  &nbsp;      animationData: animation  
  36.       })  
  37.         
  38.       //關閉  
  39.       if (currentStatu == "close") {  
  40.         this.setData(  
  41.   &nbsp;       {  
  42.             showModalStatus: false  
  43.           }  
  44.    &nbsp;    );  
  45.       }  
  46.     }.bind(this), 200)  
  47.     
  48.     // 顯示  
  49.     if (currentStatu == "open") {  
  50.       this.setData(  
  51.         {  
  52.           showModalStatus: true  
  53.        &nbsp;}  
  54.    &nbsp;  );  
  55.     }  
  56.   }  
  57.   
  58. })  

運行：


易優小程序（企業(ye)版）+靈活api+前后代(dai)碼開源 碼(ma)云倉庫(ku):
本文地址：//www.jinyoudianli.com/wxmini/doc/course/18053.html 復制鏈接 如需(xu)定制請聯系易優客服(fu)咨詢：

工作日 8:30-12:00 14:30-18:00
周六(liu)及部分節假日提供值班服務

易小優(you)
轉人(ren)工 ×