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


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阻止冒泡和HTML默认操作
Nov 17 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
vue表单数据交互提交演示教程
Nov 13 Javascript
vue 实现锚点功能操作
Aug 10 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
据说是雅虎的一份PHP面试题附答案
2009/01/07 PHP
ThinkPHP分页实例
2014/10/15 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
php实现映射操作实例详解
2019/10/02 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
原生js实现简单的模态框示例
2017/09/08 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
Python 创建守护进程的示例
2020/09/29 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
花店创业计划书范文
2014/02/07 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
党委班子对照检查材料
2014/08/19 职场文书
甘南现象心得体会
2014/09/11 职场文书
同意转租证明
2015/06/24 职场文书
微信小程序实现轮播图指示器
2022/06/25 Javascript
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python