目標(biāo):
用戶點擊提交、登錄等按鈕時,防止多次提交,所做的遮罩層
步驟:
實現(xiàn)很簡單,按鈕加上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({ /** * 頁面的初始數(shù)據(jù) */ data: { hidden: true, //等待的展示與隱藏的控制 buthidden: false //按鈕的可用和不可用的控制 }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function (options) { }, /** * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 用戶點擊右上角分享 */ onShareAppMessage: function () { }, /** * 表單提交:用戶登錄 */ formSubmit: function (e) { // 控制登錄按鈕,防止重復(fù)提交 this.setData({ hidden: false, buthidden: true }) } })
tip:
1、注意<loading><button>的顯示隱藏,實際指的是js里相關(guān)值的改變
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com