小程序开发——比较好看的登录界面设计

主要代码：

login.wxml

<form class="login-form">
  <view class="input-group {{userid_focus ? 'active' : ''}}">
    <text class="input-label">帐号</text>
    <input type="number" cursor-spacing="30" id="userid" maxlength="7" placeholder="请输入账号名" bindinput="useridInput" bindfocus="inputFocus" bindblur="inputBlur" />
  </view>
  <view class="input-group {{passwd_focus ? 'active' : ''}}">
    <text class="input-label">密码</text>
    <input password="true" cursor-spacing="30" id="passwd" placeholder="初始密码为身份证后6位" bindinput="passwdInput" bindfocus="inputFocus" bindblur="inputBlur" />
  </view>
</form>

login.wxss

.login-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

.input-group {
  display: flex;
  align-items: center;
  padding: 25rpx 10rpx;
  margin: 40rpx 3%;
  background: #fff;
  border-radius: 5px;
  border: 2px solid #f4f4f4;
  transition: all .25s ease-in-out;
}
.input-group.active {
  border: 2px solid #7acfa6;
}
.input-label {
  color: #888;
  font-size: 13pt;
  height: 25rpx;
  line-height: 25rpx;
  padding: 0 25rpx;
  border-right: 1px solid #d8d8d8; 
}
.input-group input,
.input-group picker {
  flex: 1;
  font-size: 13pt;
  min-height: 52rpx;
  height: 52rpx;
  line-height: 52rpx;
  padding: 0 25rpx;
}

login.js 处理input事件

inputFocus: function(e){
  if(e.target.id == 'userid'){
    this.setData({
      'userid_focus': true
    });
  }else if(e.target.id == 'passwd'){
    this.setData({
      'passwd_focus': true
    });
  }
},
inputBlur: function(e){
  if(e.target.id == 'userid'){
    this.setData({
      'userid_focus': false
    });
  }else if(e.target.id == 'passwd'){
    this.setData({
      'passwd_focus': false
    });
  }
},

最终效果如下：

转载于：https://www.cnblogs.com/limaostudio/p/13639577.html