E企盈营销工具技术服务商 热线:4006-838-530

小程序登录界面wxml实现(附wxml和wxss代码)

E企盈直播平台营销卖货系统

我们想要实现一个简单的登录界面,如下:首先介绍一下实现这个需要的一些控件:1.image例子:class属性是决定了它的大小、颜色、长宽高、在页面中的位置等,这些都会在wxss中定义src顾名思义source,即决定了图像从哪里来,引用什么图像2.input例子:class属性如上placeholder决定的是input框里无内容的时候显示的提示内容bindinput是输入框收到输入后会触发的事件,在js中定义js中对phoneinput的定义如下:3.button例子:size表示按钮大小loading决定名称前是否带 loading 图标plain决定按钮是否镂空,背景色透明代码如下login.wxmlview class=”container”  view class=”login-icon”  image class=”login-img” src=”../../icons/u21.png”/image  /view  view class=”login-from”    !–手机号– view class=”inputView”   image class=”nameImage” src=”../../icons/u1.png”/image   label class=”loginLab”手机号/label   input class=”inputText” placeholder=”请输入手机号” bindinput=”phoneInput” /  /view  view class=”line”/view    !–密码– view class=”inputView”   image class=”keyImage” src=”../../icons/u2.png”/image   label class=”loginLab”密码/label   input class=”inputText” password=”true” placeholder=”请输入密码” bindinput=”passwordInput” /  /view    !–按钮– view class=”loginBtnView”   button class=”loginBtn”  size=”{{primarySize}}” loading=”{{loading}}” plain=”{{plain}}” disabled=”{{disabled}}” bindtap=”login”登录/button  /view   view class=”registerBtnView”   button class=”registerBtn”  size=”{{primarySize}}” loading=”{{loading}}” plain=”{{plain}}” disabled=”{{disabled}}” bindtap=”register”注册/button  /view  /view /viewlogin.wxsspage{  height: 100%; }   .container {  height: 100%;  display: flex;  flex-direction: column;  padding: 0;  box-sizing: border-box;  background-color: #F2F2F2}   /*登录图片*/.login-icon{  flex: none; } .login-img{  margin-top: 50px; width: 50px;  height: 50px}   /*表单内容*/.login-from {  margin-top: 20px;  flex: auto;  height:100%; }   .inputView {  background-color: #fff;  line-height: 44px; } /*输入框*/.nameImage, .keyImage {  margin-left: 18px;  margin-top:10px; width: 20px;  height: 20px}   .loginLab {  margin: 15px 15px 15px 10px;  color: #545454;  font-size: 14px} .inputText {  flex: block;  float: right;  text-align: right;  margin-right: 22px;  margin-top: 11px;  color: #cccccc;  font-size: 14px}   .line {  width: 100%;  height: 1px;  background-color: #cccccc;  margin-top: 1px; } /*按钮*/.loginBtnView {  width: 100%;  height: auto;  background-color: #f2f2f2;  margin-top: 0px;  margin-bottom: 0px;  padding-bottom: 0px; } .registerBtnView {  width: 100%;  height: auto;  background-color: #f2f2f2;  margin-top: 0px;  margin-bottom: 0px;  padding-bottom: 0px;   border:none;}.registerBtn::after{  border:none;}  .loginBtn {  width: 80%;  background-color:#ffcc33; margin-top: 35px; }.registerBtn {  width: 50%;  height:40px; color:#ffcc33; background-color: #f2f2f2; margin-top: 35px;  border:none;}

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序登录界面wxml实现(附wxml和wxss代码)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏