微信小程序实现登录遮罩效果


Posted in Javascript onNovember 01, 2018

目标:

用户点击提交、登录等按钮时,防止多次提交,所做的遮罩层

步骤:

实现很简单,按钮加上disabled属性,用true和false控制。

效果图:

微信小程序实现登录遮罩效果

代码:

wxml

<!--pages/login/login.wxml-->
<loading hidden="{{hidden}}">
 登录中...
</loading>
<view class="container-login">
 <form catchsubmit="formSubmit">
  <view class='login-main'>
   <!-- username -->
   <view class="login-view">
    <image src='/images/icon/user.png'></image>
    <input type='text' name='username' placeholder='请输入用户名'></input>
   </view>
   <!-- password -->
   <view class="login-view">
    <image src='/images/icon/pwd.png'></image>
    <input type='password' name='password' placeholder='请输入密码'></input>
   </view>
  </view>
  <view class='login-part'>
   <button formType="submit" class="login-button" disabled="{{buthidden}}">登录</button>
  </view>
 </form>
</view>

js

// pages/login/login.js
Page({
 
 /**
  * 页面的初始数据
  */
 data: {
  hidden: true, //等待的展示与隐藏的控制
  buthidden: false //按钮的可用和不可用的控制
 },
 
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  
 },
 
 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {
 
 },
 
 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
 
 },
 
 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
 
 },
 
 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {
 
 },
 
 /**
  * 表单提交:用户登录
  */
 formSubmit: function (e) {
  // 控制登录按钮,防止重复提交
  this.setData({
   hidden: false,
   buthidden: true
  })
 }
})

tip:

1、注意<loading><button>的显示隐藏,实际指的是js里相关值的改变

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

Javascript 相关文章推荐
jquery中常用的SET和GET
Jan 13 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
node-sass安装失败的原因与解决方法
Sep 04 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 Javascript
在vue里使用codemirror遇到的问题
Nov 01 #Javascript
vue中使用codemirror的实例详解
Nov 01 #Javascript
vue-lazyload使用总结(推荐)
Nov 01 #Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 #Javascript
Vue列表渲染的示例代码
Nov 01 #Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 #Javascript
Vue表单输入绑定的示例代码
Nov 01 #Javascript
You might like
多文件上传的例子
2006/10/09 PHP
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
简单学习Python time模块
2016/04/29 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
python监控文件并且发送告警邮件
2018/06/21 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
采用怎样的方法保证数据的完整性
2013/12/02 面试题
艺术爱好者的自我评价分享
2013/10/08 职场文书
实习单位接收函
2014/01/11 职场文书
测试工程师职业规划书
2014/02/06 职场文书
校园公益广告语
2014/03/13 职场文书
中秋寄语大全
2014/04/11 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
消防安全月活动总结
2015/05/08 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python