小程序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);
  },
})

小程序button=disable样式修改，弹起多个蒙层限制

猜你喜欢