微信小程序实战之登录页面制作（5）

微信小程序实战之登录页面制作（5）

提供一个登录页的案例，供同学们使用

项目效果图：

目录结构：

图片资源：

name.png

key.png

loginLog.jpg

login.wxml：

账号

密码

登录

login.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: 15px 15px 15px 10px;

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;

}

login.js：

Page({

data: {

phone: 'http://',

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

})

}

}

})

运行结果：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。