小程式開發-好看的登入樣式
阿新 • • 發佈:2020-09-09
在學習小程式的demo中看到一個挺漂亮的登入頁面樣式
先儲存下來,後面有需要的時候用...
主要程式碼
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 }); } },
最終效果如下: