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

<!--pages/login/login.w -->
<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>

// pages/login/login.js
Page({
 
 /**
  * 页面的初始数据
  */
 data: {
  hidden: true, //等待的展示与隐藏的控制
  buthidden: false //按钮的可用和不可用的控制
 },
 
 /**
  * 生命周期函数--监听页面加载
  */
  : function (options) {
  
 },
 
 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面卸载
  */
  : function () {
 
 },
 
 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
 
 },
 
 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
 
 },
 
 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {
 
 },
 
 /**
  * 表单提交：用户登录
  */
 formSubmit: function (e) {
  // 控制登录按钮，防止重复提交
  this.setData({
   hidden: false,
   buthidden: true
  })
 }
})