微信小程序實現登錄遮罩效果

<!--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>

// 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
 })
 }
})