在小程序中制作一个登录页面的方法
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