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()
					}
				})
			}
		)
	}
}
相关推荐
canonical_entropy几秒前
Nop Chaos Flux:百度AMIS之后的下一代低代码渲染引擎
前端·低代码·ai编程
时光足迹19 分钟前
Tiptap 简单编辑器模版
前端·javascript·react.js
JSLove33 分钟前
nginx入门
前端·nginx
时光足迹34 分钟前
ThreeJS之GUI控制器
前端·javascript·three.js
时光足迹35 分钟前
Tiptap编辑器
前端·javascript·react.js
时光足迹38 分钟前
电子书阅读器之笔记高亮(跨段处理)
前端·javascript·react.js
Dabei41 分钟前
Android 副屏(Virtual Display)创建与悬浮窗画中画显示实战
前端·架构
RONIN1 小时前
mock模拟后端,生成伪数据接口
vue.js
Hello-Mr.Wang1 小时前
【保姆级教程】MasterGo MCP + Cursor 一键实现 UI 设计稿还原
前端·javascript·vue.js·ai编程