当前位置: 首页 > news >正文

uniapp+vue 前端防多次点击表单,防误触多次请求方法。

最近项目需求写了个uniapp+vue前端H5,有个页面提交表单的时候发现会有用户乱点导致数据库多条重复脏数据。故需要优化,多次点击表单只请求一次。

思路:

直接调用uni.showToast,点完按钮跳一个提交成功的提示。然后把防触摸穿透mask设置成true就行,最后windows.location.reload()刷新一下表单。

核心代码

写在提交按钮绑定的方法里

uni.showToast({title: '提交成功',duration: 1000,mask:true//true显示透明蒙层,防止触摸穿透
});
windows.location.reload()

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()}})})}
}
http://www.lryc.cn/news/509731.html

相关文章:

  • 【ES6复习笔记】rest参数(7)
  • Hive SQL 窗口函数 `ROW_NUMBER() ` 案例分析
  • 前端mock数据 —— 使用Apifox mock页面所需数据
  • 车载U盘制作教程:轻松享受个性化音乐
  • springboot 3 websocket react 系统提示,选手实时数据更新监控
  • 现代图形API综合比较:Vulkan DirectX Metal WebGPU
  • 【Hot100刷题计划】Day04 栈专题 1~3天回顾(持续更新)
  • 用VBA将word文档处理成支持弹出式注释的epub文档可用的html内容
  • 舵机原理介绍 简洁讲解面向实战 非阻塞式驱动代码, arduino
  • Oracle Database 23ai 中的DBMS_HCHECK
  • 如何利用AWS监听存储桶并上传到tg bot
  • STM32 SPI读取SD卡
  • TANGO与LabVIEW控制系统集成
  • eth_type_trans 函数
  • 派克汉尼汾推出新的快换接头产品系列,扩展热管理解决方案
  • uniapp 前端解决精度丢失的问题 (后端返回分布式id)
  • C语言:指针4(常量指针和指针常量及动态内存分配)
  • Win11提示fveapi.dll丢失是什么原因?fveapi.dll丢失怎么办?
  • 台球助教平台系统开发APP和小程序信息收藏功能需求解析(第十二章)
  • 如何设计 Vue 3 组件库:高效的组件化开发方法
  • 第八节、Bresenham直线插补运动【51单片机-L298N-步进电机教程】
  • 一个从oracle使用spool导出数据到kadb的脚本
  • 【STM32】GPIO口以及EXTI外部中断
  • Confluent Cloud Kafka 可观测性最佳实践
  • 【LeetCode每日一题】——415.字符串相加
  • linux---使用定时任务同步时间
  • Windows、CentOS环境下搭建自己的版本管理资料库:GitBlit
  • KNN分类算法 HNUST【数据分析技术】(2025)
  • AI Agent开源框架汇总(持续更新)
  • 录播检测原理是什么?