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

wxml

html 复制代码
<view class="modal-buttons">
  <view class="one_btn" bindtap="submit">确认</view>
  <view class="two_btn" bindtap="cancel">取消</view>
</view>

wxss

css 复制代码
/* 按钮 */
.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

javascript 复制代码
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("查询失败")
      }
    })
  }
})
相关推荐
豌豆学姐2 小时前
Sora2 能做什么?25 秒视频生成 API 的一次接入实践
大数据·人工智能·小程序·aigc·php·开源软件
李慕婉学姐3 小时前
【开题答辩过程】以《智慧校园创新互助小程序的设计与实现》为例,不知道这个选题怎么做的,不知道这个选题怎么开题答辩的可以进来看看
java·spring boot·小程序
特立独行的猫a5 小时前
移植开源软件Notepad--(NDD)到鸿蒙PC:环境搭建与配置
notepad++·开源软件·harmonyos·鸿蒙pc·notpad--
qq_12498707535 小时前
基于微信小程序的校园跑腿系统的设计与实现(源码+论文+部署+安装)
spring boot·微信小程序·小程序·毕业设计·计算机毕业设计
大大花猫7 小时前
我用AI写了个小程序,却被人说没有底线…
前端·微信小程序·交互设计
小小王app小程序开发7 小时前
盲盒小程序一番赏特殊玩法超细分拆解:从底层逻辑到落地细节
大数据·小程序
说私域7 小时前
基于AI大模型与AI智能名片S2B2C商城小程序的抖音内容力构建与品牌增长研究
大数据·人工智能·小程序·开源
微爱帮监所写信寄信8 小时前
微爱帮监狱写信寄信小程序DDoS防护:智能负载均衡架构
小程序·负载均衡·ddos
计算机毕设指导68 小时前
基于微信小程序的设备报修系统【源码文末联系】
java·spring boot·微信小程序·小程序·tomcat·maven·intellij-idea
qq_12498707538 小时前
悦读圈图书共享微信小程序(源码+论文+部署+安装)
spring boot·后端·微信小程序·小程序·毕业设计·计算机毕业设计