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()
					}
				})
			}
		)
	}
}
相关推荐
peak_chan12 小时前
通过vue-virtual-scroller封装虚拟滚动el-select
前端·javascript·vue.js
小李子呢021113 小时前
前端八股Vue(7)---computed计算属性和watch侦听器
前端·javascript·vue.js
CCIE-Yasuo13 小时前
Win11-Microsoft Edge使用起来CPU飙升以及卡顿问题解决
前端·microsoft·edge·排故
Ruihong13 小时前
Vue3 转 React:组件透传 Attributes 与 useAttrs 使用详解|VuReact 实战
vue.js·react.js
是江迪呀13 小时前
实时看大家都在干嘛?我靠一行监听函数,做了个轻互动小程序
前端·微信小程序
QCzblack13 小时前
BugKu BUUCTF ——Reverse
java·前端·数据库
gwjcloud13 小时前
基于linux下docker部署前端vue项目
前端·javascript·vue.js
小李子呢021114 小时前
前端八股CSS(1)---响应式布局的方法
前端·css
小李子呢021114 小时前
前端八股Vue(6)---v-if和v-for
前端·javascript·vue.js
程序员buddha14 小时前
ES6 迭代器与生成器
前端·javascript·es6