微信小程序实战之登录页面制作(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 相关文章推荐
js CSS操作方法集合
Oct 31 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
Oct 17 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
JavaScript Array对象使用方法解析
Sep 24 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 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
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
sae使用smarty模板的方法
2013/12/17 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
javascript 闭包详解
2015/07/02 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
python读写ini配置文件方法实例分析
2015/06/30 Python
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
python实现网站微信登录的示例代码
2019/09/18 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
产品售后服务承诺书
2014/05/21 职场文书
房屋产权证明书
2014/10/15 职场文书
小学生学习保证书
2015/02/26 职场文书
2015年双拥工作总结
2015/04/08 职场文书
小学数学国培研修日志
2015/11/13 职场文书
决心书格式及范文
2019/06/24 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers