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


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 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
JQuery从头学起第一讲
Jul 04 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 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数组操作汇总 php数组的使用技巧
2011/07/17 PHP
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
yii添删改查实例
2015/11/16 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
python继承和抽象类的实现方法
2015/01/14 Python
python保存字符串到文件的方法
2015/07/01 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
django将数组传递给前台模板的方法
2019/08/06 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
电脑专业个人求职信范文
2014/02/04 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
国际金融专业自荐信
2014/07/05 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
个人先进事迹总结
2015/02/26 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP
MySQL七种JOIN类型小结
2021/10/24 MySQL
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android