小程序button=disable樣式修改，彈起多個蒙層限制

在好多場景都需要對點擊按鈕做限制，防止連續點擊。why?例如場景獲取電話號碼授權，如果不做限制，會彈起多次授權彈窗，好；多個進行疊加，想關閉，得點擊多次。場景2：接口比較慢時，用戶會多次點擊按鈕，多次請求接口，這顯然不好......諸如此類，所以限制點擊勢在必行。

百分之99以上的公司對界面的要求都比較高，按鈕都會使用自己公司UI設計的樣式，而非原生的button組件，我從網上查過一些資料，有些說使用button[disabled]{background:red}之類的可以是可以，但如果頁面涉及多個按鈕呢，每個按鈕的UI樣式都不一樣，你這樣能一把設置嗎？顯然不行。好的，有些較真的可能會說，那我不用button組件，我用小程序的view標籤模擬，如果不涉及授權之類的，沒問題，如果涉及授權呢？小程序官方聲明必須使用按鈕，那就還得用button。

總結起來就一句話，須用button組件，須用到disabled樣式。加“!important”提高即可。

1.代碼

1.1wxml

<view class='newHouseInfor-tx tfFlex tfFlexSb'>
  <view wx:if="{{fbsIsLogin==1}}" class='newHouseInfor-tx-kp tfFlex tfFlexC' data-type='1' catchtap='kpdy'>
    <view class='newHouseInfor-tx-kp-l'></view>
    <view class='newHouseInfor-tx-kp-r'>通知我</view>
  </view>
  <button disabled='{{kpFlag}}' wx:else class='newHouseInfor-tx-kp tfFlex tfFlexC' data-type='1' open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
    <view class='newHouseInfor-tx-kp-l'></view>
    <view class='newHouseInfor-tx-kp-r'>通知我</view>
  </button>
  <view wx:if="{{fbsIsLogin==1}}" class='newHouseInfor-tx-bj tfFlex tfFlexC' data-type='2' catchtap='kpdy'>
    <view class='newHouseInfor-tx-bj-l'></view>
    <view class='newHouseInfor-tx-bj-r'>通知我</view>
  </view>
  <button disabled='{{kpFlag}}' wx:else class='newHouseInfor-tx-bj tfFlex tfFlexC' data-type='2' open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
    <view class='newHouseInfor-tx-bj-l'></view>
    <view class='newHouseInfor-tx-bj-r'>通知我</view>
  </button>
</view>

1.2wxss

.newHouseInfor-tx-kp, .newHouseInfor-tx-bj {
  font-size: 31rpx;
  color: #ff7500!important;
  border-radius: 10rpx;
  border: 1rpx solid #ff7500!important;
  width: 335rpx;
  height: 70rpx;
  line-height: 70rpx;
  padding: 0;
  margin: 0;
  background: transparent!important;
}

.newHouseInfor-tx-kp::after,.newHouseInfor-tx-bj::after{
  border: 0!important;
}

.newHouseInfor-tx-kp-l, .newHouseInfor-tx-bj-l {
  width: 42rpx;
  height: 70rpx;
  background-repeat: no-repeat!important;
  background-position: left center!important;
}

.newHouseInfor-tx-kp-l {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAeCAYAAADZ7LXbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjZDNTIyODVEQzU0RTExRTlCMDQyRThGNjYxMDNFMDg2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjZDNTIyODVFQzU0RTExRTlCMDQyRThGNjYxMDNFMDg2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NkM1MjI4NUJDNTRFMTFFOUIwNDJFOEY2NjEwM0UwODYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NkM1MjI4NUNDNTRFMTFFOUIwNDJFOEY2NjEwM0UwODYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7xp+xMAAAB6klEQVR42uyWO0gDQRCGNxoIooYIKlEQxUZ8pBHsxEawsvABIqKVleIbFauUQS6iQgq1sbQWtFBECLYGC0HERhBBC0VBI0mj57/hT1jkLne5BKsMfOxOZnf+7N7d7rj0FWHXekEEtIJbMAvOhaZbTiyxKdAEjigg2Eq/0c5kuyLjoAx8gS220p+wM9llsV11YA1MgnKDeBzsg3Vs27MTkTGwA7z0r8AleAXVoAt0MvYBpiB0kIvIMgizf8jV3BmMa0mtQogB+isQ2rDzTIYUgSUwaCIgUr9ruowv0g+LVdewlYgP7LEf5EO2Nk3f5nhpuxDyZROZ5n5fg5DIzUKcJ+fPZBMZZSv/2XdOEpr+rax8xEzEAwLsnwlnlp4XwJZ5jERqlP6TQxH1W6k1EnEr/R9HEpquzivN9VjJy4oiRZH/EelWLqJ8LP4nX0akUn5KmeM6Pwsrx75XFQnyqr1XxJyaxjz+9PEvRdrAAgfMgWR+EnqSeaTNYzVt8vo9hdPHHx8K+LzT5VJUHor1BoFCWrObVYffZEA/q0b5xvSAdyVWBS5ABavJY5McL1Z1VxmLiAaWRLKwuAHtYJMl0WOqatH0hFkSt8VSE6xeTpgw+if+lopnEbD7xcd4LUf4an6ylX4HBGJWCX4FGACXGXF/N4PkUgAAAABJRU5ErkJggg==)!important;
  background-size: 25rpx 30rpx!important;
}

.newHouseInfor-tx-bj-l {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAeCAYAAADQBxWhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdBQzZBMDJDQzU0RTExRTlBNjcyQzI1QkJGN0YwOUUwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdBQzZBMDJEQzU0RTExRTlBNjcyQzI1QkJGN0YwOUUwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6N0FDNkEwMkFDNTRFMTFFOUE2NzJDMjVCQkY3RjA5RTAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N0FDNkEwMkJDNTRFMTFFOUE2NzJDMjVCQkY3RjA5RTAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz52l7IGAAABtklEQVR42mL8X8pwiAEC7BjIAV3/SdbCAsS2DHQGTAwDAEYtHbWUKoCF6iaWMXIByS1A7IgjXzNS36dd/78BSR8g3k/f4IVY7AHEx6llqQgQcxGhzheITahhqTg02LbgtbiMMRpIrgJiViD+BMTbyLVUBoiPArEONJFsBWJ+LBYmAclFULPfA7EbEPsB8WJSLZUH4gNArIwk5gDEu4CW8CNZmAkk50LNfQPE9sD4PQnEf4HseCCeAVLGCKzaYHUTIw4LVaAWSkP59UCsDsRRUP5pIPYG4jgg7oGKvQD7sOv/ZbRQYASK/SeUTzWBeDeShZVA3AH1CSiuMoDYFIgvAbEEVM1TcCh0/b+DJVX/J1Q46ALxPmhqBYFcIJ4CZf8D4iwoOwPJwodA7ILVQiISkjGahVlIFsIAyNWgOOyE8u8CsQ0hC3FZao5k4T9oXE3HUxBUAMkSaJA+IbfsbQZiPiQLlxJRAvVSWsuEQlNrEFEWUqmW+YizhhitxMmw9COULUxPS09C2Qn0tHQClN0GxPlYaw4qA1CBDwIN0IKc1uA+EBvAElIDtM47CMTfaGgpqFJnBAgwAD73ZOR2HCe5AAAAAElFTkSuQmCC)!important;
  background-size: 29rpx 30rpx!important;
}

.newHouseInfor-tx{
  padding: 0 20rpx;
}

.tfFlex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  display: box;
  flex-wrap: wrap;
}

.tfAlignC {
  /*元素居中*/
  align-items: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
}

.tfFlexH {
  /*水平排列*/
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
}

/*垂直排列*/

.tfFlexV {
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}

/*兩端對齊*/

.tfFlexSa {
  -webkit-box-pack: justify;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  -o-justify-content: space-around;
}

/*居中對齊*/

.tfFlexC {
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
}

.tfFlexSb {
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
}

1.3js

var that;
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    kpFlag: false,
    kpurlFlag: true,
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function(options) {
    that = this;
  },
  // 開盤提醒，變價提醒
  kpdy(e) {
    // 1：開盤提醒；2：變價提醒
    var type = e.currentTarget.dataset.type ? e.currentTarget.dataset.type : '';
    if (type) {
      that.kpdy_http(type);
    }
  },
  // 接口請求
  kpdy_http() {
    if (that.data.kpurlFlag) {
      that.setData({
        kpurlFlag: false
      });
      wx.showToast({
        title: '提交中...',
        icon: 'loading'
      });
      setTimeout(function(res) {
        wx.hideToast({});
        wx.showModal({
          title: '提示',
          showCancel: false,
          confirmText: '我知道了',
          content: '會盡快聯繫你',
          success(res) {
            if (res.confirm) {
              console.log('用戶點擊確定')
            } else if (res.cancel) {
              console.log('用戶點擊取消')
            }
            that.setData({
              kpurlFlag: true
            });
          }
        });
      }, 1500);
    }
  },

  // 如果未登錄 
  /**獲取用戶電話號碼**/
  getPhoneNumber(e) {
    // 1：開盤提醒；2：變價提醒；3：預約看房
    var type = e.currentTarget.dataset.type ? e.currentTarget.dataset.type : '';
    if (e.detail.errMsg == "getPhoneNumber:ok") {
      var param = {
        iv: e.detail.iv,
        encryptedData: e.detail.encryptedData
      }
      that.setData({
        kpFlag: true,
      });
      /**logintype:2時授權登錄**/
      that.login_function(param, 'POST', type)
    } else {
      wx.navigateTo({
        url: '/page/index/login',
      });
    }
  },
  login_function(param, method, type) {
    // 請求登錄接口
    var res = {
      result: 1,
      msg: '登錄成功'
    }
    setTimeout(function() {
      /**兩種方式共同部分**/
      if (res.result) {
        wx.showToast({
          title: res.msg,
          icon: 'none',
          duration: 1500,
        });
        that.setData({
          'fbsIsLogin': 1
        });
        // 發送訂閱請求:1表示開盤通知我按鈕，2表示降價通知我按
        if (type == 1) {
          that.kpdy_http(type);
        }
        if (type == 2) {
          that.kpdy_http(type);
        }
      } else {
        wx.showToast({
          title: res.msg,
          icon: 'none',
          duration: 1500
        });
      }
      that.setData({
        kpFlag: false,
      });

    }, 1500);
  },
})