第微信小程序自定義用戶登錄彈窗本文實例為大家分享了微信小程序自定義用戶登錄彈窗的具體代碼，供大家參考，具體內(nèi)容如下

view

button

bindtap="powerDrawer"data-statu="open"立即進入/button

!--mask：彈出框--

viewbindtap="powerDrawer"data-statu="close"wx:if="{{showModalStatus}}"/view

!--content--

!--使用animation屬性指定需要執(zhí)行的動畫--

viewanimation="{{animationData}}"wx:if="{{showModalStatus}}"

!--drawercontent--

view請?zhí)顚?view

view

!--denglu

--

view/view

view姓名/view

input

type="text"placeholder='請輸入答題人姓名'maxlength='12'value=""bindinput="userNameInput"/input

view/view

view手機號/view

inputtype="text"placeholder='請輸入手機號'maxlength='11'value=""bindinput="mobileInput"/input

view/view

/view

buttontype="submit"bindtap='btnclick'快速進入/button

viewbindtap="powerDrawer"data-statu="close"取消/view

/view

css

/*css*/

.drawer_screen{

width:100%;

height:100%;

position:fixed;

top:0;

left:0;

z-index:1000;

background:#000;

opacity:0.75;

overflow:hidden;

.drawer_box{

width:650rpx;

overflow:hidden;

position:fixed;

top:50%;

left:0;

z-index:1001;

background:#FAFAFA;

margin:-150px50rpx050rpx;

border-radius:15px;

.drawer_title{

padding:15px;

font:20px"microsoftyahei";

text-align:center;

font-size:30rpx;

.drawer_content{

height:170px;

overflow-y:scroll;/*超出父盒子高度可滾動*/

.btn_ok{

padding:10px;

font:30rpx"microsoftyahei";

text-align:center;

border-top:1pxsolid#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:30028rpx/30px"microsoftyahei";

.input_base{

border:2rpxsolid#ccc;

padding-left:10rpx;

margin-right:50rpx;

.input_h30{

height:30px;

line-height:30px;

.input_h60{

height:60px;

.input_view{

font:12px"microsoftyahei";

background:#E8E8EA;

color:#000;

line-height:30px;

input{

font:12px"microsoftyahei";

background:#E8E8EA;

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;}

.name{

text-align:center;

font-size:30rpx;

width:90%;

margin:auto;

margin-top:30rpx;

.btn{

text-align:center;

font-size:30rpx;

height:60rpx;

width:90%;

margin:auto;

margin-top:20rpx;

background-color:#FAFAFA;

border-bottom:1rpxsolid#999999;

.call{

font-size:30rpx;

text-align:center;

width:90%;

margin:auto;

margin-top:45rpx;

}

js

//自定義彈框

powerDrawer:function(e){

//wx.removeStorageSync('xingming')

//wx.removeStorageSync('phone')

varcurrentStatu=e.currentTarget.dataset.statu;

this.util(currentStatu)

},

util:function(currentStatu){

/*動畫部分*/

//第1步：創(chuàng)建動畫實例

varanimation=wx.createAnimation({

duration:200,//動畫時長

timingFunction:"linear",//線性

delay:0//0則不延遲

});

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

this.animation=animation;

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

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

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

this.setData({

animationData:animation.export()

})

//第5步：設置定時器到指定時候后，執(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

}

);

}

},

//登錄

userNameInput:function(e){

this.setData({

userName:e.detail.value

})

mobileInput:function(e){

this.setData({

mobile:e.detail.value

})

btnclick:function(){

varuserName=this.data.userName;

varmobile=this.data.mobile;

varflag=true;

varphonetel=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;

varname=/^[u4E00-u9FA5]+$/;

if(userName==''){

wx.showToast({

title:'請輸入用戶名',

icon:'none',

duration:2000,

mask:true

})

flag=false;

}elseif(mobile==''){

wx.showToast({

icon:'none',

duration:2000,

title:'手機號不能為空',

})

flag=false;

}

elseif(mobile.length!=11){

wx.showToast({

title:'手機號長度有誤！',

icon:'none',

duration:2000,

})

flag=false;

}

varmyreg=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;

if(!myreg.test(mobile)){

wx.showToast({

title:'請輸入正確信息！',

icon:'none',

duration:2000,

})

flag=false;

}

if(flag==true){

//console.log(this.data.userNa