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

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

项目效果图：

目录结构：

图片资源：

name.png

key.png

loginLog.jpg

login.wxml：

<view class="container">
 <view class="login-icon">
 <image class="login-img" src="../images/loginLog.jpg"></image>
 </view>
 <view class="login-from"> 

 <!--账号-->
 <view class="inputView">
  <image class="nameImage" src="../images/name.png"></image>
  <label class="loginLab">账号</label>
  <input class="inputText" placeholder="请输入账号" bindinput="phoneInput" />
 </view>
 <view class="line"></view> 

 <!--密码-->
 <view class="inputView">
  <image class="keyImage" src="../images/key.png"></image>
  <label class="loginLab">密码</label>
  <input class="inputText" password="true" placeholder="请输入密码" bindinput="passwordInput" />
 </view> 

 <!--按钮-->
 <view class="loginBtnView">
  <button class="loginBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="login">登录</button>
 </view>
 </view>
</view> 

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: '',
 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
  })
 }
 }
}) 

运行结果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。