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()
					}
				})
			}
		)
	}
}
相关推荐
We་ct22 分钟前
React 性能优化精讲
前端·javascript·react.js·性能优化·前端框架·html·浏览器
云动课堂33 分钟前
【运维实战】Nginx 高性能Web服务 · 一键自动化部署方案 (适配银河麒麟 V10 / openEuler / CentOS 7/8)
运维·前端·nginx
大前端helloworld2 小时前
AI全自动实现Flutter蓝牙自动连接
前端
GISer_Jing2 小时前
从入门到落地:前端开发者的AI Agent全栈学习路线
前端·人工智能·ai编程
计算机安禾2 小时前
【Linux从入门到精通】第47篇:SystemTap与eBPF——Linux内核观测的显微镜
java·linux·前端
技术钱3 小时前
OutputParser输出解析器
linux·服务器·前端·python
专科3年的修炼3 小时前
uni-app移动应用开发第四章
开发语言·javascript·uni-app
可达鸭小栈4 小时前
易语言实现CSS像素文字生成器:无需字体文件渲染汉字
前端·css
fox_lht4 小时前
DBeaver的LightGrid 类所有函数详细分析
前端
钛态4 小时前
前端TypeScript高级技巧:让你的代码更安全
前端·vue·react·web