目標:
用戶點擊提交、登錄等按鈕時,防止多次提交,所做的遮罩層
步驟:
實現很簡單,按鈕加上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.jsPage({ /** * 頁面的初始數據 */ 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里相關值的改變
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答