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


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 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
用jquery写的菜单从左往右滑动出现
Apr 11 Javascript
js点击选择文本的方法
Feb 09 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
详解Vue 的异常处理机制
Nov 30 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求一个网段开始与结束IP地址的方法
2015/07/09 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
PHP Cookie学习笔记
2016/08/23 PHP
php数组和链表的区别总结
2019/09/20 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
javascript 必知必会之closure
2009/09/21 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
Python break语句详解
2014/03/11 Python
python安装以及IDE的配置教程
2015/04/29 Python
Python中random模块生成随机数详解
2016/03/10 Python
python和opencv实现抠图
2018/07/18 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
超市中秋节活动方案
2014/02/12 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
课外访万家心得体会
2014/09/03 职场文书
2014年营销工作总结
2014/11/22 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫
DSP接收机前端设想
2022/04/05 无线电
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技