uniapp+vue 前端防多次点击表单,防误触多次请求方法。

最近项目需求写了个uniapp+vue前端H5,有个页面提交表单的时候发现会有用户乱点导致数据库多条重复脏数据。故需要优化,多次点击表单只请求一次。

思路:

直接调用uni.showToast,点完按钮跳一个提交成功的提示。然后把防触摸穿透mask设置成true就行,最后windows.location.reload()刷新一下表单。

核心代码

写在提交按钮绑定的方法里

js 复制代码
uni.showToast({
	title: '提交成功',
	duration: 1000,
	mask:true//true显示透明蒙层,防止触摸穿透
});
windows.location.reload()

js完整代码

js 复制代码
methods: {
	submit() {
		this.$refs.form.validate().then(res =>{
				console.log('校验成功')
				uni.request({
					url:('http://xxx.xxx.xxx.xx'),
					method:'POST',
					data:this.user,
					success(res) {
						console.log(res)
						uni.showToast({
							title: '提交成功',
							duration: 1000,
							mask:true//true显示透明蒙层,防止触摸穿透
						});
						window.location.reload()
					}
				})
			}
		)
	}
}
相关推荐
前端小趴菜0521 分钟前
vue3-signature实现电子签名
前端·javascript·vue.js
玉米Yvmi23 分钟前
React自定义Hook实战指南:从入门到精通,让你的代码像乐高一样灵活
前端·react.js·面试
CharlieWang32 分钟前
AI + Cloudflare = 你需要的全部
前端·敏捷开发·全栈
卤蛋fg634 分钟前
vue表格vxe-table如何获取拖拽后的行序号
vue.js
董员外35 分钟前
从零实现 AI 编程助手:LangChain.js + ReAct 循环实战
前端·javascript·后端
bluceli36 分钟前
JavaScript BigInt:处理大数值的终极解决方案
前端·javascript
不懂代码的切图仔38 分钟前
小程序web-view嵌入h5扫码 html5-qrcode库使用方法
前端·微信
不懂代码的切图仔38 分钟前
小程序web-view嵌入h5扫码 jssdk方式
前端·微信小程序
软弹41 分钟前
Vue2、Vue3、React 状态管理全方位对比
前端·javascript·vue.js·react.js
王启年43 分钟前
npm link 详解:本地包开发与测试的利器
前端