推56論壇

 找回密碼
 立即注冊(限中文)

QQ登錄

只需一步,快速開始

查看: 882|回復: 0
打印 上一主題 下一主題

[小程序教程] 微信小程序教程(28) :微信小程序之自定義模態彈窗(帶動畫)實例

[復制鏈接]
跳轉到指定樓層
樓主
發表于 2018-4-21 16:54:08 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式

首先看看官方提供的模態彈窗



api如下:



示例:


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

但是并不能使用它來處理復雜性的彈窗業務,因此寫了Michael從新自定義了一個,采用了仿原生的樣式寫法



wxml:


[html] view plain copy


  • <!--button-->  
  • <view class="btn" bindtap="powerDrawer" data-statu="open">button</view>  
  •   
  • <!--mask-->  
  • <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>  
  • <!--content-->  
  • <!--使用animation屬性指定需要執行的動畫-->  
  • <view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">  
  •   
  •   <!--drawer content-->  
  •   <view class="drawer_title">彈窗標題</view>  
  •   <view class="drawer_content">  
  •     <view class="top grid">  
  •       <label class="title col-0">標題</label>  
  •       <input class="input_base input_h30 col-1" name="rName" value="可自行定義內容"></input>  
  •     </view>  
  •     <view class="top grid">  
  •       <label class="title col-0">標題</label>  
  •       <input class="input_base input_h30 col-1" name="mobile" value="110"></input>  
  •     </view>  
  •     <view class="top grid">  
  •       <label class="title col-0">標題</label>  
  •       <input class="input_base input_h30 col-1" name="phone" value="拒絕伸手黨"></input>  
  •     </view>  
  •     <view class="top grid">  
  •       <label class="title col-0">標題</label>  
  •       <input class="input_base input_h30 col-1" name="Email" value="僅供學習使用"></input>  
  •     </view>  
  •     <view class="top bottom grid">  
  •       <label class="title col-0">備注</label>  
  •       <input class="input_base input_h30 col-1" name="bz"></input>  
  •     </view>  
  •   </view>  
  •   <view class="btn_ok" bindtap="powerDrawer" data-statu="close">確定</view>  
  • </view>  





wxss:


[css] view plain copy


  • /*button*/  
  • .btn {  
  •   width: 80%;  
  •   padding: 20rpx 0;  
  •   border-radius: 10rpx;  
  •   text-align: center;  
  •   margin: 40rpx 10%;  
  •   background: #000;  
  •   color: #fff;  
  • }  
  •   
  • /*mask*/  
  • .drawer_screen {  
  •   width: 100%;  
  •   height: 100%;  
  •   position: fixed;  
  •   top: 0;  
  •   left: 0;  
  •   z-index: 1000;  
  •   background: #000;  
  •   opacity: 0.5;  
  •   overflow: hidden;  
  • }  
  •   
  • /*content*/  
  • .drawer_box {  
  •   width: 650rpx;  
  •   overflow: hidden;  
  •   position: fixed;  
  •   top: 50%;  
  •   left: 0;  
  •   z-index: 1001;  
  •   background: #FAFAFA;  
  •   margin: -150px 50rpx 0 50rpx;  
  •   border-radius: 3px;  
  • }  
  •   
  • .drawer_title{  
  •   padding:15px;  
  •   font: 20px "microsoft yahei";  
  •   text-align: center;  
  • }  
  • .drawer_content {  
  •   height: 210px;  
  •   overflow-y: scroll; /*超出父盒子高度可滾動*/  
  • }  
  •   
  • .btn_ok{  
  •   padding: 10px;  
  •   font: 20px "microsoft yahei";  
  •   text-align: center;  
  •   border-top: 1px solid #E8E8EA;  
  •   color: #3CC51F;  
  • }  
  •   
  • .top{  
  •     padding-top:8px;  
  • }  
  • .bottom {  
  •     padding-bottom:8px;  
  • }  
  • .title {  
  •     height: 30px;  
  •     line-height: 30px;  
  •     width: 160rpx;  
  •     text-align: center;  
  •     display: inline-block;  
  •     font: 300 28rpx/30px "microsoft yahei";  
  • }  
  •   
  • .input_base {  
  •     border: 2rpx solid #ccc;  
  •     padding-left: 10rpx;  
  •     margin-right: 50rpx;  
  • }  
  • .input_h30{  
  •     height: 30px;  
  •     line-height: 30px;  
  • }  
  • .input_h60{  
  •     height: 60px;  
  • }  
  • .input_view{  
  •     font: 12px "microsoft yahei";  
  •     background: #fff;  
  •     color:#000;  
  •     line-height: 30px;  
  • }  
  •   
  • input {  
  •     font: 12px "microsoft yahei";  
  •     background: #fff;  
  •     color:#000 ;  
  • }  
  • radio{  
  •     margin-right: 20px;  
  • }  
  • .grid { display: -webkit-box; display: box; }  
  • .col-0 {-webkit-box-flex:0;box-flex:0;}  
  • .col-1 {-webkit-box-flex:1;box-flex:1;}  
  • .fl { float: left;}  
  • .fr { float: right;}  




js:

[javascript] view plain copy


  • Page({  
  •   data: {  
  •     showModalStatus: false  
  •   },  
  •   powerDrawer: function (e) {  
  •     var currentStatu = e.currentTarget.dataset.statu;  
  •     this.util(currentStatu)  
  •   },  
  •   util: function(currentStatu){  
  •     /* 動畫部分 */  
  •     // 第1步:創建動畫實例   
  •     var animation = wx.createAnimation({  
  •       duration: 200,  //動畫時長  
  •       timingFunction: "linear", //線性  
  •       delay: 0  //0則不延遲  
  •     });  
  •       
  •     // 第2步:這個動畫實例賦給當前的動畫實例  
  •     this.animation = animation;  
  •   
  •     // 第3步:執行第一組動畫  
  •     animation.opacity(0).rotateX(-100).step();  
  •   
  •     // 第4步:導出動畫對象賦給數據對象儲存  
  •     this.setData({  
  •       animationData: animation.export()  
  •     })  
  •       
  •     // 第5步:設置定時器到指定時候后,執行第二組動畫  
  •     setTimeout(function () {  
  •       // 執行第二組動畫  
  •       animation.opacity(1).rotateX(0).step();  
  •       // 給數據對象儲存的第一組動畫,更替為執行完第二組動畫的動畫對象  
  •       this.setData({  
  •         animationData: animation  
  •       })  
  •         
  •       //關閉  
  •       if (currentStatu == "close") {  
  •         this.setData(  
  •           {  
  •             showModalStatus: false  
  •           }  
  •         );  
  •       }  
  •     }.bind(this), 200)  
  •    
  •     // 顯示  
  •     if (currentStatu == "open") {  
  •       this.setData(  
  •         {  
  •           showModalStatus: true  
  •         }  
  •       );  
  •     }  
  •   }  
  •   
  • })  


運行:



本版積分規則

關閉

推56站長論壇推薦上一條 /1 下一條

站長QQ
在線咨詢
咨詢熱線
QQ:405327411
站長

QQ|廣告合作|關于我們|聯系我們|免責聲明|網站導航|小黑屋|站長論壇 ( 豫ICP備11018337號-5 )

王寶臣旗下網站 推56論壇(www.fuibch.live)站長論壇 SEO論壇 網絡營銷論壇 新手站長論壇 網絡推廣論壇 站長社區 站長網

Powered by Discuz! X3.4 Licensed

©2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表
3分赛车计划软件 南京麻将app 重庆快乐10分 幸运农场稳赚 广西快乐双彩开奖走势 单机明星麻将 660678王中王开奖结果 黑龙江快乐十分开奖视频 福建36选7上线时间 手机捕鱼游戏平台 波克棋牌电脑版下载 湖北快3时时彩网官网 辽宁11选5技巧 稳赚