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

目标:

我们提供的服务有:网站建设、成都网站设计、微信公众号开发、网站优化、网站认证、景宁畲族自治ssl等。为上千多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的景宁畲族自治网站制作公司

用户点击提交、登录等按钮时,防止多次提交,所做的遮罩层

步骤:

实现很简单,按钮加上disabled属性,用true和false控制。

效果图:

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

代码:

wxml



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、注意

其他资讯