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


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动态添加 input type=file的实现代码
Jun 14 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
php对mongodb的扩展(初识如故)
Nov 11 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
微信小程序实现底部弹出框
Nov 18 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
如何用vue实现网页截图你知道吗
Nov 17 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
php 动态多文件上传
2009/01/18 PHP
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
在视频前插入广告
2006/11/20 Javascript
javascript脚本调试方法小结
2008/11/24 Javascript
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
Python中自定义函数的教程
2015/04/27 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
python调用摄像头的示例代码
2020/09/28 Python
Python实现简单猜数字游戏
2021/02/03 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
医学专业毕业生个人求职信
2013/12/25 职场文书
会务接待方案
2014/02/27 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
民间借贷借条范本
2015/05/25 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
SQL注入详解及防范方法
2021/12/06 MySQL