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

实例描述：用户前端提交表单时的重复点击情况
适用范围：微信小程序 基础库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>

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