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()
					}
				})
			}
		)
	}
}
相关推荐
Moment1 小时前
腾讯终于对个人开放了,5 分钟在 QQ 里养一只「真能干活」的 AI 😍😍😍
前端·后端·github
比尔盖茨的大脑2 小时前
AI Agent 架构设计:从 ReAct 到 Multi-Agent 系统
前端·人工智能·全栈
天才熊猫君2 小时前
使用 Vite Mode 实现客户端与管理端的物理隔离
前端
HelloReader2 小时前
React Hook 到底是干嘛的?
前端
用户60572374873082 小时前
OpenSpec 实战:从需求到代码的完整工作流
前端·后端·程序员
寅时码2 小时前
React 正在演变为一场不可逆的赛博瘟疫:AI 投毒、编译器迷信与装死的官方
前端·react.js·设计模式
忆江南2 小时前
HTTP 各版本演进与 HTTPS 原理详解
前端
忆江南3 小时前
对组件化与模块化的思考与总结
前端
小码哥_常3 小时前
从0到1:Android组件化架构搭建秘籍
前端