<强>目标:
用户点击提交,登录等按钮时,防止多次提交,所做的遮罩层
<强>步骤:
实现很简单,按钮加上禁用属性,用真和假控制。
<>强效果图:
<强>代码:
wxml
& lt; !——页面/登录/login.wxml——比;
& lt;加载隐藏="{{隐藏}}”在
登录中……
& lt;/loading>
& lt;视图类=癱ontainer-login”比;
& lt;形式catchsubmit=癴ormSubmit”比;
& lt;视图类=login-main的祝辞
& lt; !——用户名——比;
& lt;视图类=發ogin视图”比;
& lt;图像src=" https://www.yisu.com/images/icon/user.png "祝辞& lt;/image>
& lt;输入类型=拔谋尽钡拿?坝没闭嘉环?扒胧淙胗没淖４? lt;/input>
& lt;/view>
& lt; !——密码——比;
& lt;视图类=發ogin视图”比;
& lt;图像src=" https://www.yisu.com/images/icon/pwd.png "祝辞& lt;/image>
& lt;输入类型='密码' name='密码'占位符=扒胧淙朊苈氲淖４? lt;/input>
& lt;/view>
& lt;/view>
& lt;视图类=login-part的祝辞
& lt;按钮formType=疤峤弧眂lass=暗锹桨磁ァ苯?" {{buthidden}} "祝辞登录& lt;/button>
& lt;/view>
& lt;/form>
& lt;/view>
js
//页面/登录/login.js
页面({/* *
*页面的初始数据
*/数据:{
隐藏:真的,//等待的展示与隐藏的控制
buthidden:假//按钮的可用和不可用的控制
}，/* *
*生命周期函数——监听页面加载
*/onLoad:功能(选项){
}，/* *
*生命周期函数——监听页面初次渲染完成
*/onReady:函数(){
}，/* *
*生命周期函数——监听页面显示
*/昂秀:函数(){
}，/* *
*生命周期函数——监听页面隐藏
*/onHide:函数(){
}，/* *
*生命周期函数——监听页面卸载
*/onUnload:函数(){
}，/* *
*页面相关事件处理函数——监听用户下拉动作
*/onPullDownRefresh:函数(){
}，/* *
*页面上拉触底事件的处理函数
*/onReachBottom:函数(){
}，/* *
*用户点击右上角分享
*/onShareAppMessage:函数(){
}，/* *
*表单提交:用户登录
*/formSubmit:函数(e) {//控制登录按钮,防止重复提交
this.setData ({
隐藏:假的,
buthidden:真
})
}
})
之前
1,注意& lt; loading> & lt; button>的显示隐藏,实际指的是js里相关值的改变
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
