微信小程序防止多次点击提交的方法
wxml:
<form action="">
<view>姓名:<input type="text" name="username"/></view>
<button form-type="submit" class="button" wx:if="{{display}}" bindtap="tijiao">提交</button>
<button class="button" wx:else="{{display}}" disabled >提交2</button>
</form>
js:
page({
data{
display:true,
},
//提交函数
tijiao:function(){
//设置提交后按钮不能用
this.setData({display:false});
},
});
====以下为转载=======================================================================================================
适用范围:微信小程序 基础库1.0.1以上所有版本
一、利用页面数据加上lock参数
page.js中加入
Page({
data: {
lock: false
},
//表单提交
submit(){
let that = this;
let {lock} = that.data;
if(!lock){
that.setData({lock:true});
//数据请求操作
//请求完成后 开锁
that.setData({lock:false});
}
}
})
二、利用背景图层遮挡
wxml中加入
<view style="width:100vw;height:100vh;z-index:100000;display:block;" wx:if="{{show}}"></view>
age.js中加入
Page({
data: {
show: false
},
//表单提交
submit(){
let that = this;
let {show} = that.data;
if(!show){
that.setData({show:true});
//数据请求操作
//请求完成后 隐藏图层
that.setData({show:false});
}
}
})
三、隐藏按钮的方式
wxml中加入
<view wx:if="{{show}}">无事件的按钮</view>
<view wx:else>有事件的按钮</view>
page.js中加入
Page({
data: {
show: false
},
//表单提交
submit(){
let that = this;
let {show} = that.data;
if(!show){
that.setData({show:true});
//数据请求操作
//请求完成后 隐藏按钮
that.setData({show:false});
}
}
})