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


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 面向对象编程  function是方法(函数)
Sep 17 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 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防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
一览画面点击复选框后获取多个id值的方法
2016/05/30 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
JS实现简单打字测试
2020/06/24 Javascript
Python实例一个类背后发生了什么
2016/02/09 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
详解Python3的TFTP文件传输
2018/06/26 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
基于Python fminunc 的替代方法
2020/02/29 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
python 字符串格式化的示例
2020/09/21 Python
numba提升python运行速度的实例方法
2021/01/25 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
面向对象编程OOP的优点
2013/01/22 面试题
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
银行会计职员个人的自我评价
2013/09/29 职场文书
一名毕业生的自我鉴定
2013/12/04 职场文书
生日寄语大全
2014/04/08 职场文书
考博专家推荐信
2014/05/10 职场文书
公司建议书怎么写
2014/05/15 职场文书
挂职锻炼个人总结
2015/03/05 职场文书