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


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 相关文章推荐
js 设置选中行的样式的实现代码
May 24 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 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页面运行时间的函数介绍
2013/07/01 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
php实现异步数据调用的方法
2015/12/24 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
Python模块学习 re 正则表达式
2011/05/19 Python
理解Python中函数的参数
2015/04/27 Python
Python set常用操作函数集锦
2017/11/15 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
详解Python3中ceil()函数用法
2019/02/19 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
Python如何解除一个装饰器
2020/08/07 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
室内拓展活动方案
2014/02/13 职场文书
新教师个人总结
2015/02/06 职场文书
2016年元旦致辞
2015/08/01 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript