当前位置:   article > 正文

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

微信小程序按钮禁止点击

wxml

  1. <view class="modal-buttons">
  2. <view class="one_btn" bindtap="submit">确认</view>
  3. <view class="two_btn" bindtap="cancel">取消</view>
  4. </view>

wxss

  1. /* 按钮 */
  2. .modal-buttons {
  3. width: 100%;
  4. height:7%;
  5. display: flex;
  6. font-weight:bold;
  7. }
  8. .one_btn{
  9. flex:1;
  10. display: flex;
  11. align-items: center;
  12. justify-content: center;
  13. background-color: #4b97e7;
  14. border-top: 1rpx solid #4b97e7;
  15. color: #fff;
  16. border-radius: 0;
  17. }
  18. .two_btn{
  19. flex:1;
  20. display: flex;
  21. align-items: center;
  22. justify-content: center;
  23. width: 100%;
  24. border-top: 1rpx solid #4b97e7;
  25. border-radius: 0px;
  26. background-color: #fff;
  27. color: #4b97e7;
  28. }

js

  1. const app = getApp()
  2. Page({
  3. data: {
  4. submitting:false//设置按钮禁用参数,默认为非禁用状态
  5. },
  6. //确认
  7. submit(){
  8. var that = this;
  9. if (that.data.submitting) {
  10. return; // 如果正在提交中,则直接返回,避免重复提交
  11. }
  12. // 禁用提交按钮
  13. that.setData({
  14. submitting: true,
  15. });
  16. console.log('执行下面的方法')
  17. wx.request({
  18. url: app.globalData.position + 'Produce/test',
  19. data: {
  20. wip_id: options.id
  21. },
  22. header: {
  23. "Content-Type": "application/x-www-form-urlencoded"
  24. },
  25. method: 'POST',
  26. dataType: 'json',
  27. success: res => {
  28. //请求完成,取消禁用
  29. that.setData({
  30. submitting: false, //取消禁用
  31. });
  32. },
  33. fail(res) {
  34. //请求完成,取消禁用
  35. that.setData({
  36. submitting: false, //取消禁用
  37. });
  38. console.log("查询失败")
  39. }
  40. })
  41. }
  42. })

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/268114?site
推荐阅读
相关标签
  

闽ICP备14008679号