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()
					}
				})
			}
		)
	}
}
相关推荐
golang学习记7 分钟前
从0死磕全栈之Next.js 字体优化实战:零布局偏移、高性能、隐私友好的字体加载方案
前端
张可爱16 分钟前
20251015-Vue3八股文整理
前端
ruanCat16 分钟前
记一次因 vue-router 升级而导致的 uniapp 故障
前端·vue.js
Damon小智17 分钟前
基于 Rokid JSAR 打造精致的 3D 白色飞机模型
前端·虚拟现实
2501_9159090618 分钟前
iOS App 上架全流程详解:证书配置、打包上传、审核技巧与跨平台上架工具 开心上架 实践
android·ios·小程序·https·uni-app·iphone·webview
Mintopia19 分钟前
🌌 知识图谱与 AIGC 融合:
前端·javascript·aigc
2501_9151063222 分钟前
iOS 26 系统流畅度测试实战分享,多工具组合辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_9159184122 分钟前
开发 iOS 应用全流程指南,环境搭建、证书配置与跨平台使用 开心上架 上架AppStore
android·ios·小程序·https·uni-app·iphone·webview
三十_22 分钟前
TypeORM 基础篇:项目初始化与增删改查全流程
前端·后端