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()
					}
				})
			}
		)
	}
}
相关推荐
小明记账簿20 小时前
An unexpected error occurred: “https://registry.npm.taobao.org/
前端·前端框架
醉挽清风78320 小时前
Vue+Djiango基础用法
前端·javascript·vue.js
dreams_dream20 小时前
vue2动态更改css属性方法大全
前端·css
阿基米东20 小时前
Caddy:把 HTTPS 变成默认选项的现代 Web 服务器
服务器·前端·https
洞窝技术20 小时前
从原理到落地:大屏适配适配 + 高并发弹幕的企业级技术手册
前端·css
IT_陈寒20 小时前
JavaScript性能优化:5个V8引擎隐藏技巧让你的代码提速50%
前端·人工智能·后端
菠菜盼娣20 小时前
第三方插件 unplugin-icons
前端
敲代码的彭于晏20 小时前
在迁移中学习 React 18:一份来自 React 17 的升级问题清单
前端·react.js
顾安r20 小时前
12.17 脚本工具 自动化全局跳转
linux·前端·css·golang·html
踢球的打工仔20 小时前
jquery的基本使用(2)
前端·javascript·jquery