用户点击提交、登录等按钮时，防止多次提交，所做的遮罩层
步骤：
实现很简单，按钮加上disabled属性，用true和false控制。
效果图：
代码：
wxml
<!--pages/login/login.wxml--> <loading hidden="{{hidden}}"> 登录中... </loading> <view> <form catchsubmit="formSubmit"> <view> <!-- username --> <view> <image src='https://www.jb51.net/images/icon/user.png'></image> <input type='text' placeholder='请输入用户名'></input> </view> <!-- password --> <view> <image src='https://www.jb51.net/images/icon/pwd.png'></image> <input type='password' placeholder='请输入密码'></input> </view> </view> <view> <button formType="submit" 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 }) } })