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


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 相关文章推荐
JavaScript 语言的递归编程
May 18 Javascript
Javascript Throttle &amp; Debounce应用介绍
Mar 19 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
Vue路由权限控制解析
Nov 09 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时的知识积累总结
2013/06/07 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
jquery replace方法去空格
2017/05/08 jQuery
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
python通过shutil实现快速文件复制的方法
2015/03/14 Python
Python进程间通信之共享内存详解
2017/10/30 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
SQL Server笔试题
2012/01/10 面试题
将相和教学反思
2014/02/04 职场文书
2014年督导工作总结
2014/11/19 职场文书
首次购房证明
2015/06/19 职场文书
公司财务管理制度
2015/08/04 职场文书
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript