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()
					}
				})
			}
		)
	}
}
相关推荐
拉不动的猪23 分钟前
pc和移动页面切换的两种基本方案对比
前端·javascript·vue.js
Hilaku31 分钟前
前端日志调试也能专业化?我们这样设计日志系统
前端·javascript
李杰同志8916337 分钟前
iOS moya 实现双token 刷新并重试
前端
前端小巷子42 分钟前
跨标签页通信(五):IndexedDB
前端·面试·浏览器
LaoZhangAI44 分钟前
2025全面评测:Flux AI图像生成器6大模型全解析【专业测评】
前端·后端
PioneerWang44 分钟前
useContext及其原理解析
前端
用户7161912821761 小时前
告别繁琐的路由配置:vite-plugin-convention-routes 让你的 Vue 项目更优雅
前端
小桥风满袖1 小时前
Three.js-硬要自学系列34之专项学习几何体
前端·css·three.js
今阳1 小时前
鸿蒙开发笔记-17-ArkTS并发
android·前端·harmonyos
BUG收容所所长1 小时前
深入理解 AJAX,从 XMLHttpRequest 到现代 Fetch API
前端·javascript·ajax