提供一个登录页的案例

项目效果图：

目录结构：

login.wxml：
[html] view plain copy print?
1. <view class="container">  
2.   <view class="login-icon">  
3.     <image class="login-img" src="../images/loginLog.jpg"></image>  
4.   </view>  
5.   <view class="login-from">  
6.   
7.     <!--账号-->  
8.     <view class="inputView">  
9.       <image class="nameImage" src="../images/name.png"></image>  
10.       <label class="loginLab">账号</label>  
11.       <input class="inputText" placeholder="请输入账号" bindinput="phoneInput" />  
12.     </view>  
13.     <view class="line"></view>  
14.   
15.     <!--密码-->  
16.     <view class="inputView">  
17.       <image class="keyImage" src="../images/key.png"></image>  
18.       <label class="loginLab">密码</label>  
19.       <input class="inputText" password="true" placeholder="请输入密码" bindinput="passwordInput" />  
20.     </view>  
21.   
22.     <!--按钮-->  
23.     <view class="loginBtnView">  
24.       <button class="loginBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="login">登录</button>  
25.     </view>  
26.   </view>  
27. </view>  
 
 
login.wxss：
[css] view plain copy print?
1. page{  
2.   height: 100%;  
3. }  
4.   
5. .container {  
6.   height: 100%;  
7.   display: flex;  
8.   flex-direction: column;  
9.   padding: 0;  
10.   box-sizing: border-box;  
11.   background-color: #f2f2f2  
12. }   
13.   
14. /*登录图片*/  
15. .login-icon{  
16.   flex: none;  
17. }  
18. .login-img{  
19.   width: 750rpx;  
20. }  
21.   
22. /*表单内容*/  
23. .login-from {  
24.   margin-top: 20px;  
25.   flex: auto;  
26.   height:100%;  
27. }  
28.   
29. .inputView {  
30.   background-color: #fff;  
31.   line-height: 44px;  
32. }  
33. /*输入框*/  
34. .nameImage, .keyImage {  
35.   margin-left: 22px;  
36.   width: 14px;  
37.   height: 14px  
38. }  
39.   
40. .loginLab {  
41.   margin: 15px 15px 15px 10px;  
42.   color: #545454;  
43.   font-size: 14px  
44. }  
45. .inputText {  
46.   flex: block;  
47.   float: right;  
48.   text-align: right;  
49.   margin-right: 22px;  
50.   margin-top: 11px;  
51.   color: #cccccc;  
52.   font-size: 14px  
53. }  
54.   
55. .line {  
56.   width: 100%;  
57.   height: 1px;  
58.   background-color: #cccccc;  
59.   margin-top: 1px;  
60. }  
61. /*按钮*/  
62. .loginBtnView {  
63.   width: 100%;  
64.   height: auto;  
65.   background-color: #f2f2f2;  
66.   margin-top: 0px;  
67.   margin-bottom: 0px;  
68.   padding-bottom: 0px;  
69. }  
70.   
71. .loginBtn {  
72.   width: 80%;  
73.   margin-top: 35px;  
74. }  
 
login.js：
[javascript] view plain copy print?
1. Page({  
2.   data: {  
3.     phone: '',  
4.     password:''  
5.   },  
6.   
7. // 获取输入账号  
8.   phoneInput :function (e) {  
9.     this.setData({  
10.       phone:e.detail.value  
11.     })  
12.   },  
13.   
14. // 获取输入密码  
15.   passwordInput :function (e) {  
16.     this.setData({  
17.       password:e.detail.value  
18.     })  
19.   },  
20.   
21. // 登录  
22.   login: function () {  
23.     if(this.data.phone.length == 0 || this.data.password.length == 0){  
24.       wx.showToast({    
25.         title: '用户名和密码不能为空',    
26.         icon: 'loading',    
27.         duration: 2000    
28.       })    
29. }else {  
30.   // 这里修改成跳转的页面  
31.       wx.showToast({    
32.         title: '登录成功',    
33.         icon: 'success',    
34.         duration: 2000    
35.       })    
36.     }    
37.   }  
38. })

运行结果：

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道！