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()
					}
				})
			}
		)
	}
}
相关推荐
飞飞98716 分钟前
spring mvc
java·服务器·前端
sql1234567891121 分钟前
Vue-js
前端·javascript·vue.js
何日成熟1 小时前
修改 vue-pdf 源码升级 pdfjs-dist 包, 以解决部分 pdf 文件显示花屏问题
前端·vue.js·pdf
橙子yq1 小时前
pdfjs-dist实现pdf预览偶现空白不报错问题解决
前端·javascript·pdf
itachi-uchiha1 小时前
Apache Apisix配置ip-restriction插件以限制IP地址访问
前端·firefox
每一天,每一步1 小时前
React+MapBox GL JS引入URL服务地址实现自定义图标标记地点、区域绘制功能
前端·javascript·react.js
取个好名称1 小时前
适合初学者的 Blender 第二部分
java·前端·blender
阿乐今天敲代码没2 小时前
echarts定制化柱状图——条纹柱状图
前端·echarts
linux-hzh2 小时前
CSS回顾
前端·css
天若有情6732 小时前
C++ 结构体封装模式与 Promise 链式调用:设计思想的异曲同工
前端·javascript·c++