微信小程序如何制作登录页面

微信小程序如何制作登录页面

在小程序中制作一个登录页面的方法

index.wxml文件

<viewclass="container">

<viewclass="login-icon">

<imageclass="login-img"src="../images/loginLog.jpg"></image>

</view>

<viewclass="login-from">

<!–账号框–>

<viewclass="inputView">

<imageclass="nameImage"src="../images/name.png"></image>

<labelclass="loginLab">账号</label>

<inputclass="inputText"placeholder="请输入账号"bindinput="phoneInput"/>

</view>

<viewclass="line"></view>

<!–密码框–>

<viewclass="inputView">

<imageclass="keyImage"src="../images/key.png"></image>

<labelclass="loginLab">密码</label>

<inputclass="inputText"password="true"placeholder="请输入密码"bindinput="passwordInput"/>

</view>

<!–登录按钮–>

<viewclass="loginBtnView">

<buttonclass="loginBtn"type="primary"size="{{primarySize}}"loading="{{loading}}"plain="{{plain}}"disabled="{{disabled}}"bindtap="login">登录</button>

</view>

</view>

</view>

index.wxss文件

page{

height:100%;

}

.container{

height:100%;

display:flex;

flex-direction:column;

padding:0;

box-sizing:border-box;

background-color:#f2f2f2

}

/*背景图片*/

.login-icon{

flex:none;

}

.login-img{

width:750rpx;

}

/*表单内容*/

.login-from{

margin-top:20px;

flex:auto;

height:100%;

}

.inputView{

background-color:#fff;

line-height:44px;

}

/*输入框*/

.nameImage,.keyImage{

margin-left:22px;

width:14px;

height:14px

}

.loginLab{

margin:15px15px15px10px;

color:#545454;

font-size:14px

}

.inputText{

flex:block;

float:right;

text-align:right;

margin-right:22px;

margin-top:11px;

color:#cccccc;

font-size:14px

}

.line{

width:100%;

height:1px;

background-color:#cccccc;

margin-top:1px;

}

/*登录按钮*/

.loginBtnView{

width:100%;

height:auto;

background-color:#f2f2f2;

margin-top:0px;

margin-bottom:0px;

padding-bottom:0px;

}

.loginBtn{

width:80%;

margin-top:35px;

}

index.js文件

Page({

data:{

phone:'',

password:''

},

//获取输入账号

phoneInput:function(e){

this.setData({

phone:e.detail.value

})

},

//获取输入密码

passwordInput:function(e){

this.setData({

password:e.detail.value

})

},

//登录条件

login:function(){

if(this.data.phone.length==0||this.data.password.length==0){

wx.showToast({

title:'用户名和密码不能为空',

icon:'loading',

duration:2000

})

}else{

//修改成跳转的页面

wx.showToast({

title:'登录成功',

icon:'success',

duration:2000

})

}

}

})

了解更多微信小程序如何制作登录页面相关的解答,就上多想派(www.duoxiangpai.com)。

本文章由用户七点生活分享,版权归原作者,如侵犯,请联系(点这里联系),经核实,我们将第一时间删除。如若转载,请注明出处:https://www.duoxiangpai.com/65469.html

(0)

相关推荐