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()
					}
				})
			}
		)
	}
}
相关推荐
tryCbest2 分钟前
Python之Flask开发框架(第五篇)- 使Flask + Vue 构建前后端分离项目教程
vue.js·python·flask
Free Tester3 分钟前
手动访问网页用的chrome,和使用命令行指定端口启动的chrome,浏览器指纹是否一致
前端·chrome
2401_827499997 分钟前
python核心语法05-模块
java·前端·python
ShineWinsu7 分钟前
Chrome安全机制深度解析技术文章
前端·chrome·安全
EnoYao7 分钟前
把你们开发扒个底朝天 Skill
前端·后端·程序员
程序员 沐阳11 分钟前
从内容管控到硬件隔离:Chrome 安全防护体系深度拆解
前端·chrome·安全
IT_陈寒15 分钟前
JavaScript开发实战:从入门到精通
前端·人工智能·后端
Highcharts.js17 分钟前
Highcharts 前端导出详解:如何实现纯客户端导出(Offline Exporting)
前端·客户端·导出·highcharts·导出图片
qq_3813385023 分钟前
React 18+ 并发特性深度解析:从原理到企业级性能优化实战
前端·react.js·性能优化
桔筐23 分钟前
Axios 从入门到实战封装全解析(附异步/拦截器/生命周期)
vue.js