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

微信小程序:按钮禁用,避免按钮重复提交

wxml

<view class="modal-buttons"><view class="one_btn" bindtap="submit">确认</view><view class="two_btn" bindtap="cancel">取消</view>
</view>

wxss

/* 按钮 */
.modal-buttons {width: 100%;height:7%;display: flex;font-weight:bold;
}
.one_btn{flex:1;display: flex;align-items: center;justify-content: center;background-color: #4b97e7;border-top: 1rpx solid #4b97e7;color: #fff;border-radius: 0;
}
.two_btn{flex:1;display: flex;align-items: center;justify-content: center;width: 100%;border-top: 1rpx solid #4b97e7;border-radius: 0px;background-color: #fff;color: #4b97e7;
}

js

const app = getApp()
Page({data: {submitting:false//设置按钮禁用参数,默认为非禁用状态},//确认submit(){var that = this;if (that.data.submitting) {return; // 如果正在提交中,则直接返回,避免重复提交}// 禁用提交按钮that.setData({submitting: true,});console.log('执行下面的方法')wx.request({url: app.globalData.position + 'Produce/test',data: {wip_id: options.id},header: {"Content-Type": "application/x-www-form-urlencoded"},method: 'POST',dataType: 'json',success: res => {//请求完成,取消禁用that.setData({submitting: false, //取消禁用});},fail(res) {//请求完成,取消禁用that.setData({submitting: false, //取消禁用});console.log("查询失败")}})}
})

http://www.lryc.cn/news/260894.html

相关文章:

  • JAVA 异常分类及处理
  • C语言--求数组的最大值和最小值【两种方法】
  • ES-组合与聚合
  • 在 Spring Boot 中发送邮件简单实现
  • 深入理解网络 I/O:单 Selector 多线程|单线程模型
  • Kafka Avro序列化之三:使用Schema Register实现
  • EasyExcel
  • java 探针两种模式实战
  • uniGUI之MASK遮罩
  • DevOps云原生创建devops流水线(微服务项目上传git,打包镜像,部署k8s)
  • 【vim 学习系列文章 13.1 -- 自动命令autocmd 根据文件类型设置vim参数】
  • 算法基础概念之数据结构
  • 解决ES伪慢查询
  • 关于Ubuntu22.04恢复误删文件的记录
  • Docker笔记:Docker Swarm, Consul, Gateway, Microservices 集群部署
  • 浅析AI视频分析与视频管理系统EasyCVR平台及场景应用
  • 跨站点分布式多活存储建设方案概述
  • Github 2023-12-16开源项目日报Top10
  • c++ 中多线程的相关概念与多线程类的使用
  • 深入理解 hash 和 history:网页导航的基础(下)
  • 腾讯文档助力CRM集成:无代码连接电商与广告
  • 学习使用echarts漏斗图的参数配置和应用场景
  • npm ,yarn 更换使用国内镜像源,阿里源,清华大学源
  • vue+react题集整理
  • 线程池ThreadPoolExecutor详解
  • elasticsearch|大数据|kibana的安装(https+密码)
  • vue javascript tree 层级数据处理
  • WPF仿网易云搭建笔记(4):信息流控制之消息订阅
  • 持续集成交付CICD:GitLabCI操作Harbor仓库
  • [C++]——学习模板