微信小程序自定義用戶登錄彈窗

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

view

button

bindtap="powerDrawer"data-statu="open"立即進(jìn)入/button

!--mask：彈出框--

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

!--content--

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

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

!--drawercontent--

view請(qǐng)?zhí)顚?view

view

!--denglu

--

view/view

view姓名/view

input

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

view/view

view手機(jī)號(hào)/view

inputtype="text"placeholder='請(qǐng)輸入手機(jī)號(hào)'maxlength='11'value=""bindinput="mobileInput"/input

view/view

/view

buttontype="submit"bindtap='btnclick'快速進(jìn)入/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;/*超出父盒子高度可滾動(dòng)*/

.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){

/*動(dòng)畫部分*/

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

varanimation=wx.createAnimation({

duration:200,//動(dòng)畫時(shí)長(zhǎng)

timingFunction:"linear",//線性

delay:0//0則不延遲

});

//第2步：這個(gè)動(dòng)畫實(shí)例賦給當(dāng)前的動(dòng)畫實(shí)例

this.animation=animation;

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

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

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

this.setData({

animationData:animation.export()

})

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

setTimeout(function(){

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

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

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

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:'請(qǐng)輸入用戶名',

icon:'none',

duration:2000,

mask:true

})

flag=false;

}elseif(mobile==''){

wx.showToast({

icon:'none',

duration:2000,

title:'手機(jī)號(hào)不能為空',

})

flag=false;

}

elseif(mobile.length!=11){

wx.showToast({

title:'手機(jī)號(hào)長(zhǎng)度有誤！',

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:'請(qǐng)輸入正確信息！',

icon:'none',

duration:2000,

})

flag=false;

}

if(flag==true){

//console.log(this.data.userNa