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


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数组定义方法
Sep 10 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
微信小程序云开发使用方法新手初体验
May 16 Javascript
element中的$confirm的使用
Apr 26 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 Javascript
javascript实现计算器功能详解流程
Nov 01 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
php 表单数据的获取代码
2009/03/10 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
关于反爬虫的一些简单总结
2017/12/13 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
python 带时区的日期格式化操作
2020/10/23 Python
python 读取串口数据的示例
2020/11/09 Python
python 通过exifread读取照片信息
2020/12/24 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
最新党员思想汇报
2014/01/01 职场文书
学校文明单位申报材料
2014/05/06 职场文书
上海世博会口号
2014/06/19 职场文书
学前班学生评语
2014/12/29 职场文书
公务员年度考核评语
2014/12/31 职场文书
求职简历自我评价范文
2015/03/10 职场文书
学前教育见习总结
2015/06/23 职场文书
工作服管理制度范本
2015/08/06 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书