微信小程序:按钮禁用,避免按钮重复提交
2023-12-13 05:23:54
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("查询失败")
}
})
}
})
文章来源:https://blog.csdn.net/weixin_46001736/article/details/134954419
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!