目标:
用户点击提交, 登录等按钮时, 防止多次提交, 所做的遮罩层
步骤:
实现很简单, 按钮加上 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 里相关值的改变
来源: https://www.jb51.net/article/149993.htm