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

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

首先看看官方提供的模態(tài)彈窗

api如下：

示例：

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

但是并不能使用它來處理復(fù)雜性的彈窗業(yè)務(wù)，因此寫了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屬性指定需要執(zhí)行的動畫-->  

			<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="可自行定義內(nèi)容"></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="僅供學(xué)習(xí)使用"></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步：創(chuàng)建動畫實例   

			    var animation = wx.createAnimation({  

			      duration: 200,  //動畫時長  

			      timingFunction: "linear", //線性  

			      delay: 0  //0則不延遲  

			    });  

			    // 第2步：這個動畫實例賦給當前的動畫實例  

			    this.animation = animation;  

			    // 第3步：執(zhí)行第一組動畫  

			    animation.opacity(0).rotateX(-100).step();  

			    // 第4步：導(dǎo)出動畫對象賦給數(shù)據(jù)對象儲存  

			    this.setData({  

			      animationData: animation.export()  

			    })  

			    // 第5步：設(shè)置定時器到指定時候后，執(zhí)行第二組動畫  

			    setTimeout(function () {  

			      // 執(zhí)行第二組動畫  

			      animation.opacity(1).rotateX(0).step();  

			      // 給數(shù)據(jù)對象儲存的第一組動畫，更替為執(zhí)行完第二組動畫的動畫對象  

			      this.setData({  

			        animationData: animation  

			      })  

			      //關(guān)閉  

			      if (currentStatu == "close") {  

			        this.setData(  

			          {  

			            showModalStatus: false  

			          }  

			        );  

			      }  

			    }.bind(this), 200)  

			    // 顯示  

			    if (currentStatu == "open") {  

			      this.setData(  

			        {  

			          showModalStatus: true  

			        }  

			      );  

			    }  

			  }  

			})

運行：

易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源碼云倉庫:

本文地址：http://m.chqfk.com/wxmini/doc/course/18053.html 復(fù)制鏈接如需定制請聯(lián)系易優(yōu)客服咨詢：點擊咨詢

免責聲明：本站所有文章和圖片均來自用戶分享和網(wǎng)絡(luò)收集，文章和圖片版權(quán)歸原作者及原出處所有，僅供學(xué)習(xí)與參考，請勿用于商業(yè)用途，如果損害了您的權(quán)利，請聯(lián)系網(wǎng)站客服處理。

熱門問題
最新問題

小程序模板網(wǎng)

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

產(chǎn)品

服務(wù)

幫助

關(guān)于