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()
					}
				})
			}
		)
	}
}
相关推荐
Novlan1几秒前
Stepper 小数输入精度丢失 Bug 修复
前端
陈随易6 分钟前
刚上市就断货?如此火爆的编程显示器到底有什么魔力
前端·后端·程序员
兆子龙20 分钟前
前端哨兵模式(Sentinel Pattern):优雅实现无限滚动加载
前端·javascript·算法
豆苗学前端36 分钟前
彻底讲透浏览器渲染原理,吊打面试官
前端·javascript·面试
踩着两条虫43 分钟前
AI 驱动的 Vue3 应用开发平台 入门指南(五):创建 H5 移动应用
前端·vue.js·ai编程
ZengLiangYi1 小时前
用 AudioContext.suspend()/resume() 作为流式音视频的同步门控
前端·音视频开发
踩着两条虫1 小时前
AI 驱动的 Vue3 应用开发平台 入门指南(二):快速入门
前端·vue.js·ai编程
程序员阿耶1 小时前
CSS滚动条样式从入门到实战:打造跨浏览器的自定义滚动条
前端
范小饭1 小时前
哼,要变天了:副业赚18块的自救实录
前端
天蓝色的鱼鱼3 小时前
从“死了么”到“我在”:用uniCloud开发一款温暖人心的App
前端·uni-app