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

主要代码：

<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-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

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

【小程序开发之文章详情页面的设计】文章详情页面如何布局
本篇博客是小程序开发系列的第四篇,在上一篇博客中介绍的是首页的制作,除了展示轮播图图片,食谱的封面.名称以及文章的封面和标题这些静态的东西之外我们还需要在点击它们的时候能够跳转到详情页面. 除了在首页 ...
微信小程序个人中心页与登录界面的切换
总结: 1)进行前端验证 2)进行后端验证 3)后端验证通过,获取数据 4)将login登录界面获取到的数据交给personal页面使用,可以先将数据使用wx.setStorageSync存储起来,p ...
校友会小程序开发笔记四：UI基本元素设计
基于微信小程序轻快的特点, 旨在微信生态体系内,建立友好.高效.一致的用户体验,同时最大程度适应和支持不同校友需求,实现校友与小程序服务方的共赢. 为了避免下游在微信中使用小程序服务时,注意力被周围复 ...
校友卡小程序开发笔记一：总体架构设计
一校友卡小程序的现实意义于秋高气爽时邂逅重大再到似锦繁花扬帆远航母校的一草一木,一人一物因为与你们走过的朝朝暮暮而被赋予了新的意义. 人走天涯,心系母校一隅一角,满载思念二功能规划 ...
小程序开发-1：用户登录授权没反应-遇坑
一个看似没有什么问题的代码,但点了好几次登录授权都没有反应. getUserProfile() {// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需 ...
微信小程序开发的完整流程介绍，新手必读
自从跳一跳小程序游戏出现后,一夜之间,小程序就变得家喻户晓了,功能开发也越来越丰富,在微信搜一搜就会发现许多大品牌早已有自己的小程序了,越来越多的企业和商家都看中了这个风口,想快速开发出一款属于自己的 ...
【无标题】小程序开发网站建设前端网页制作美工H5
精通系统开发,程序开发,微信公众号开发,小程序开发,网站建设,网页设计制作,微信增粉/APP开发/h5前端制作/seo网络推广/网站推广/推广小程序/商务拍摄摄影摄像航拍宣传片微电影抖音快手短视频/视 ...
微信小程序开发工具有哪些？哪个工具好用
现在的我们日常使用微信小程序的频率几乎跟使用微信的频率差不多了,因为小程序"轻量.方便.快捷",能满足大部分日常使用场景,也可以帮助商家卖货引流营销.不过在进行微信小程序开发时,我 ...
视频教程-微信小程序开发教程（第一阶段、页面设计）（维吾尔语）-HTML5/CSS
微信小程序开发教程(第一阶段.页面设计)(维吾尔语) 毕业于北京邮电大学计算机专业.拥有将近10年的开发经验.精通java.php.python.c/c++.微信开发等等技术! 艾孜麦提阿布都热合曼 ...
Taro 小程序开发大型实战（三）：实现微信和支付宝多端登录
欢迎继续阅读<Taro 小程序开发大型实战>系列,前情回顾: 熟悉的 React,熟悉的 Hooks[1]:我们用 React 和 Hooks 实现了一个非常简单的添加帖子的原型多页面跳 ...

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

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

最新文章

热门文章