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()
					}
				})
			}
		)
	}
}
相关推荐
lzhdim13 小时前
SQL 入门 10:SQL 内置函数:数值、字符串与时间处理
前端·数据库·sql
张元清13 小时前
5 分钟用 Vite SSR 搭建一个全栈 React 应用
前端·javascript·面试
空中海13 小时前
6.1 主题与暗色模式
运维·服务器·前端·flutter
前端那点事13 小时前
Vue3+Pinia实战完整版|从入门到精通,替代Vuex的状态管理首选
vue.js
踩着两条虫13 小时前
效率翻倍!AI智能体深度解析:自然语言 → DSL → Vue组件
前端·人工智能·低代码
吴声子夜歌14 小时前
Vue3——条件判断指令
前端·es6
snow_yan14 小时前
AI 对话流式输出: 实现“逐字丝滑、不闪烁、不卡顿”的打字机效果
前端·react.js·openai
Devin_chen14 小时前
Pinia 渐进式学习指南
前端·vue.js
你听得到1114 小时前
周下载60w,但是作者删库!我从本地 pub 缓存里把它救出来,顺手备份到了自己的 GitHub
前端·flutter
PeterMap14 小时前
Vue组合式API响应式状态声明:ref与reactive实战解析
前端·vue.js