您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
目标：
用户点击提交、登录等按钮时，防止多次提交，所做的遮罩层
步骤：
实现很简单，按钮加上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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。