微信小程序-登录-页面-代码-实现-峯-推荐

学习目标

1、掌握 JAVA入门到进阶知识(持续写作中……）
2、学会Oracle数据库用法(创作中……）
3、手把手教你vbs脚本制作(完善中……）
4、强大的 IDEA编程利器(编写中……）
5、经典常见的 面试技巧技巧(更新中……）

---

---

实现效果

---

希望：2021新的一年，想要的都拥有，得不到的都释怀！

login.js

// pages/login/login.js
Page({
   
  data: {
   
    disabled: true,
    btnstate: "default",
    account: "",
    password: ""
  },
  accountInput: function (e) {
   
    var content = e.detail.value;
    console.log(content);
    if (content != "") {
   
      this.setData({
    disabled: false, btnstate: "primary", account: content });
    }
  },
  pwdBlur: function (e) {
   
    var password = e.detail.value;
    if (password != "") {
   
      this.setData({
    password: password });
    }
  }
})

login.wxml

 <!--pages/login/login.wxml-->
 <view class="content">
   <view class="account">
     <view class="title">账号</view>
     <view class="num"><input bindinput="accountInput" placeholder="用户名/邮箱/手机号" placeholder-style="color:#999999;"/></view>
   </view>
   <view class="hr"></view>
   <view class="account">
     <view class="title">密码</view>
     <view class="num"><input bindblur="pwdBlur" placeholder="请输入密码" password placeholder-style="color:#999999;"/></view>
     <view class="see">
       <image src="/images/太极.png" style="width:35px;height:30px;"></image>
     </view>
   </view>
 <view class="hr"></view>
 <button class="btn" disabled="{
   {disabled}}" type="{
   {btnstate}}"bindtap="login">登录</button>
 <view class="operate">
   <view><navigator url="../mobile/mobile">手机快速注册</navigator></view>
   <view><navigator url="../autho/index">一键微信号登录</navigator></view>
 </view>

 </view>

login.json

{
   
  "usingComponents": {
   },
  "navigationBarTitleText": "登录"
}

login.wxss

/* pages/login/login.wxss */
 /* pages/login/login.wxss */
 .content{
   
   margin-top: 40px;
 }
 .account{
   
   display: flex;
   flex-direction: row;
   padding-left: 20px;
   padding-top: 20px;
  padding-bottom: 10px;
  width: 90%;
}
.title{
   
  margin-right: 30px;
  font-weight: bold;
}
.hr{
   
  border: 1px solid #cccccc;
  opacity: 0.2;
  width: 90%;
  margin: 0 auto;
}
.see{
   
  position: absolute;
  right: 20px;
}
.account{
   
   display: flex;
   flex-direction: row;
   padding-left: 20px;
   padding-top: 20px;
   padding-bottom: 10px;
   width: 90%;
 }
 .title{
   
   margin-right: 30px;
   font-weight: bold;
 }
 .hr{
   
   border: 1px solid #cccccc;
   opacity: 0.2;
   width: 90%;
   margin: 0 auto;
 }
 .see{
   
   position: absolute;
   right: 20px;
 }
 .btn{
   
   width: 90%;
   margin-top: 40px;
   color: #999999;
 }
 .operate{
   
   display: flex;
   flex-direction: row; 
 }
 .operate view{
   
   margin: 0 auto;
   margin-top: 40px;
   font-size: 14px;
   color: #333333;
 }
 .login{
   
   display: flex;
   flex-direction: row;
   margin-top: 150px;
 }
 .login view{
   
   margin: 0 auto;
 }

转载：https://blog.csdn.net/Feng_wwf/article/details/115001695