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()
					}
				})
			}
		)
	}
}
相关推荐
Luna-player4 分钟前
前端中stylus是干嘛用的
前端·css·stylus
CHQIUU21 分钟前
解决 npm 全局安装 EACCES 权限问题(macOS 篇)
前端·macos·npm
程序员鱼皮21 分钟前
OpenClaw接入飞书保姆级教程,几分钟搞定手机养龙虾!
前端·人工智能·后端
紫_龙38 分钟前
最新版vue3+TypeScript开发入门到实战教程之vue3与vue2语法优劣对比
前端·javascript·typescript
SouthRosefinch1 小时前
一、HTML简介与开发环境
开发语言·前端·html
全栈小51 小时前
【前端】Vue 组件开发中的枚举值验证:从一个Type属性错误说起
前端·javascript·vue.js
Joker Zxc1 小时前
【前端基础(Javascript部分)】4、JavaScript的分支语句
开发语言·前端·javascript
IT_陈寒1 小时前
JavaScript 性能优化的5个隐藏技巧:90%开发者都不知道的实战方案!
前端·人工智能·后端
꧁꫞꯭零꯭点꯭꫞꧂2 小时前
G6绘制机柜 以及机柜设备的demo
前端·javascript·vue.js
C澒2 小时前
供应链产研交付提效:前端多业务线新增样板间页面统计方案
前端·mr