微信小程序之登录页实例
项目效果图：
目录结构：
login.wxml：
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：
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：
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 })
