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()
					}
				})
			}
		)
	}
}
相关推荐
之歆15 小时前
DAY_18深度解析:数据类型转换与运算符全攻略(上)
前端·javascript
大家的林语冰15 小时前
pnpm 11 发布,弃用 JSON 和 npm CLI,进化为纯 ES6 模块,新增 pnpm pack-app 等命令,供应链保护默认启用,要求 Node
前端·javascript·node.js
漓漾li15 小时前
每日面试题-前端2
前端·react.js·面试
Alice-YUE15 小时前
深入解析 JS 事件循环:浏览器与 Node.js 的差异全解析
前端·javascript·笔记·学习
HYCS15 小时前
用pixijs实现fabricjs(二):对象的基础位置信息
前端·javascript·canvas
淸湫15 小时前
项目中使用了全局权限管理,请详细描述如何通过Vue Router的路由守卫来实现全局权限控制?
前端·vue.js
雪铃儿15 小时前
Shorebird 之外,Flutter Android 热更新还有什么选择
android·前端
李剑一15 小时前
前端必看 | Vue 刷新页面,生命周期钩子直接 "罢工",原来问题在这?90% 开发者都栽过!
前端·vue.js
閞杺哋笨小孩15 小时前
域名驱动多租户入驻:后台配置 + 前端解析
前端·vue.js
TeamDev15 小时前
在 Excel 加载项中嵌入 Web 视图
前端·后端·.net