Wechat applet -picker component is repackaged and the disabled attribute is added -- below

Click here    Wechat applet -picker Component reseal increase disabled attribute -- Above,

In the last article, I mentioned the repackaged picker The effect of the component is as follows ：

When picker When one of the items is not selectable , It will be as shown in the figure below , The color is grey , And the user cannot click to select .

The following code can be directly copied and pasted ～

The native form component of wechat is used here picker-view and picker-view-column, You can check how to use it by yourself

---

 custom-picker The component code is expanded as follows ：

//custome-picker.wxml

<view>
  <slot></slot>
  <view class="picker-container" style="{
   {showflag?'display:blcok':'display:none'}}">
    <view class="shadow" catchtap="eventCancel" catchtouchmove="{
   {true}}"></view>
    <view class="wrap wrap-position">
      <view class="wrap-top">
        <text class="left-btn" catchtap="eventCancel"> Cancel </text>
        <text class="right-btn" catchtap="eventSure"> determine </text>
      </view>
      <!--  Scroll content  -->
      <picker-view 
        indicator-style="height: 50px;" 
        style="width: 100%; height: 200px;" 
        value="{
   {value}}" 
        bindchange="bindChange">
        <picker-view-column>
          <view 
          wx:for="{
   {range}}" 
          wx:key="index" 
          style="{
   {item.disabled ? 'color:#cdcdcd;line-height: 50px; text-align: center;' :'line-height: 50px; text-align: center;'}}" 
          >{
   {item[rangeKey]}}</view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</view>

// custom-picker.js
Component({
  properties:{
    range:{
      type: Array,
    },
    rangeKey: { //  Cyclic display of bytes 
      type: String,
      default(){
        return ''
      }
    },
    value: String
  },
  //  internal data 
  data: {
    showflag: false,
    setValue: [0],//  The first item is selected by default 
  },
  onLoad(){},
  methods: {
    //  Click cancel event 
    eventCancel(){
      this.setData({
        showflag: !this.data.showflag
      })
    },

    //  Click OK event 
    eventSure(){
      //  If the option is grayed out , This option is prohibited 
      const selectObj = this.data.range[this.data.setValue[0]]
      if(selectObj.hasOwnProperty('disabled') && selectObj.disabled){
        return
      }
      this.setData({
        showflag: !this.data.showflag
      })
      let item = this.data.setValue[0] || "0" //  Selected information - If it doesn't trigger bindChange, The first message is selected by default 
      this.triggerEvent('customEvent',item) 
    },

    //  Show picker
    showPicker: function(e){
      this.setData({
        showflag: !this.data.showflag
      })
    },

    //  Scroll Events 
    bindChange(e){
      this.setData({
        setValue: e.detail.value,
      })
    }

  }
})

//custome-picker.wxss

.shadow{
  background: #000000;
  opacity: 0.6;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 101;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.wrap{
  width: 100%;
  height: 600rpx;
  background-color: #ffffff;
}
.wrap-position{
  position: fixed;
  z-index: 102;
  bottom: 0;
  left: 0;
  right: 0;
}
.wrap-top{
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #e3e4e5;
}
.wrap .left-btn{
  float: left;
  padding-left: 30rpx;
  color: #b1b2b3;
  font-size: 36rpx;
}
.wrap .right-btn{
  color: #07c160;
  float: right;
  padding-right: 30rpx;
  font-size: 36rpx;
}

//custom-picker.json
{
  "component": true
}

The problems encountered here ：

1. The applet mask layer scrolls to prevent penetration problems  

        Adds... To the current mask layer  catchtouchmove="{ {true}}" that will do , There is a phenomenon that it has no effect on developer tools , Can still slide , But mobile phone test ios/andriod It can realize the effect of prohibiting scrolling ！

2. Applet setData Dynamic variable problem

3. The above relates to The applet prevents events from bubbling The problem of