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


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 相关文章推荐
分享20款好玩的jQuery游戏
Apr 17 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
在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
ajax 的post方法实例(带循环)
2011/07/04 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
window.dialogArguments 使用说明
2011/04/11 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
JS数组的常见用法实例
2015/02/10 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
python转换摩斯密码示例
2014/02/16 Python
python实现清屏的方法
2015/04/30 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
python with语句的原理与用法详解
2020/03/30 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
致1500米运动员广播稿
2014/02/07 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
2016年记者节感言
2015/12/08 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers