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()
					}
				})
			}
		)
	}
}
相关推荐
我不吃饼干3 小时前
在 React 中实现倒计时功能会有什么坑
前端·react.js
小小小小宇3 小时前
前端PerformanceObserver
前端
王者鳜錸4 小时前
PYTHON从入门到实践-18Django从零开始构建Web应用
前端·python·sqlite
拾光拾趣录4 小时前
ES6到HTTPS全链路连环拷问,99%人第3题就翻车?
前端·面试
haaaaaaarry5 小时前
Element Plus常见基础组件(二)
开发语言·前端·javascript
xyphf_和派孔明5 小时前
关于echarts的性能优化考虑
前端·性能优化·echarts
PyHaVolask5 小时前
HTML 表单进阶:用户体验优化与实战应用
前端·javascript·html·用户体验
A了LONE5 小时前
cv弹窗,退款确认弹窗
java·服务器·前端
AntBlack6 小时前
闲谈 :AI 生成视频哪家强 ,掘友们有没有推荐的工具?
前端·后端·aigc
花菜会噎住6 小时前
Vue3核心语法进阶(computed与监听)
前端·javascript·vue.js