目標：
用戶點擊提交、登錄等按鈕時，防止多次提交，所做的遮罩層
步驟：
實現很簡單，按鈕加上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里相關值的改變
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
