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()
					}
				})
			}
		)
	}
}
相关推荐
weiabc1 天前
整数最接近等因数分解函数(汇编优化版)
开发语言·前端·javascript
小满zs1 天前
Next.js身份验证(better-auth)
前端·seo·next.js
雯0609~1 天前
微信小程序的原生开发项目如何转至uni-app
微信小程序·小程序·uni-app
IMPYLH1 天前
Linux 的 truncate 命令
linux·运维·服务器·前端·bash
invicinble1 天前
前端框架使用vue-cli( 第一层:依赖与环境层)
前端·vue.js·前端框架
七七powerful1 天前
mac电脑安装cmca根证书
java·前端·macos
invicinble1 天前
前端框架使用vue-cli (第五层:构建打包层--vue.config.js文件介绍以及环境文件)
javascript·vue.js·前端框架
神探小白牙1 天前
echarts环形图自定义
android·前端·echarts
ZC跨境爬虫1 天前
跟着 MDN 学 HTML day_28:(使用选择器 API 在 DOM 树中进行选择与遍历)
前端·ui·html·音视频·webrtc
东北甜妹1 天前
K8s Ingress
java·运维·前端