微信小程序防止多次点击提交的方法

微信小程序防止多次点击提交的方法

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});
	}
  }
})