微信小程序实战之登录页面制作(5)


Posted in Javascript onMarch 30, 2020

提供一个登录页的案例,供同学们使用

项目效果图:

微信小程序实战之登录页面制作(5)

目录结构:

微信小程序实战之登录页面制作(5)

图片资源:

name.png

微信小程序实战之登录页面制作(5)

key.png

微信小程序实战之登录页面制作(5)

loginLog.jpg

微信小程序实战之登录页面制作(5)

login.wxml:

<view class="container"> 
 <view class="login-icon"> 
 <image class="login-img" src="../images/loginLog.jpg"></image> 
 </view> 
 <view class="login-from"> 
 
 <!--账号--> 
 <view class="inputView"> 
 <image class="nameImage" src="../images/name.png"></image> 
 <label class="loginLab">账号</label> 
 <input class="inputText" placeholder="请输入账号" bindinput="phoneInput" /> 
 </view> 
 <view class="line"></view> 
 
 <!--密码--> 
 <view class="inputView"> 
 <image class="keyImage" src="../images/key.png"></image> 
 <label class="loginLab">密码</label> 
 <input class="inputText" password="true" placeholder="请输入密码" bindinput="passwordInput" /> 
 </view> 
 
 <!--按钮--> 
 <view class="loginBtnView"> 
 <button class="loginBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="login">登录</button> 
 </view> 
 </view> 
</view>

login.wxss:

page{ 
 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{ 
 width: 750rpx; 
} 
 
/*表单内容*/ 
.login-from { 
 margin-top: 20px; 
 flex: auto; 
 height:100%; 
} 
 
.inputView { 
 background-color: #fff; 
 line-height: 44px; 
} 
/*输入框*/ 
.nameImage, .keyImage { 
 margin-left: 22px; 
 width: 14px; 
 height: 14px 
} 
 
.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; 
} 
 
.loginBtn { 
 width: 80%; 
 margin-top: 35px; 
}

login.js:

Page({ 
 data: { 
 phone: '', 
 password:'' 
 }, 
 
// 获取输入账号 
 phoneInput :function (e) { 
 this.setData({ 
 phone:e.detail.value 
 }) 
 }, 
 
// 获取输入密码 
 passwordInput :function (e) { 
 this.setData({ 
 password:e.detail.value 
 }) 
 }, 
 
// 登录 
 login: function () { 
 if(this.data.phone.length == 0 || this.data.password.length == 0){ 
 wx.showToast({ 
 title: '用户名和密码不能为空', 
 icon: 'loading', 
 duration: 2000 
 }) 
}else { 
 // 这里修改成跳转的页面 
 wx.showToast({ 
 title: '登录成功', 
 icon: 'success', 
 duration: 2000 
 }) 
 } 
 } 
})

运行结果

微信小程序实战之登录页面制作(5)

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
JavaScript中for-in遍历方式示例介绍
Feb 11 Javascript
js使用ajax读博客rss示例
May 06 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
原生js实现照片墙效果
Oct 13 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 Javascript
Angular2数据绑定详解
Apr 18 #Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 #Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 #Javascript
JavaScript实现前端实时搜索功能
Mar 26 #Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 #Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 #Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 #Javascript
You might like
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
PHP微信支付开发实例
2016/06/22 PHP
JavaScript触发器详解
2007/03/10 Javascript
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
python制作websocket服务器实例分享
2016/11/20 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
简单分析python的类变量、实例变量
2019/08/23 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
药学专业大学生自荐信
2013/09/28 职场文书
小学教师的自我评价范例
2013/10/31 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
2014年班干部工作总结
2014/11/25 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL
使用python绘制横竖条形图
2022/04/21 Python
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL