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

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("查询失败")
      }
    })
  }
})
相关推荐
小明记账簿28 分钟前
微信小程序开发实战:图片转 Base64 全解析
微信小程序·小程序
汤姆yu31 分钟前
基于微信小程序的粤语文化传播系统
微信小程序·小程序
Q_Q51100828533 分钟前
python+uniapp基于微信小程序的垃圾分类信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
ducaifeng8639 分钟前
微信小程序:onReady详解
微信小程序·小程序
李纲明2 小时前
开发一个小程序花多少钱
微信小程序·wordpress·wordpress外贸站
_jeneen3 小时前
小程序 scroll-view 触底事件不触发问题
微信小程序·小程序
2501_915921434 小时前
查看iOS App实时日志的正确方式,多工具协同打造高效调试与问题定位体系(2025最新指南)
android·ios·小程序·https·uni-app·iphone·webview
一匹电信狗6 小时前
【C++11】Lambda表达式+新的类功能
服务器·c++·算法·leetcode·小程序·stl·visual studio
G佳伟8 小时前
如何解决解决,微信小程序ios无法长按复制问题<text>设置 selectable=“true“不起作用
ios·微信小程序·小程序
说私域8 小时前
开源链动2+1模式AI智能名片S2B2C商城小程序的价值及持续变现能力分析
人工智能·小程序·开源