微信小程序-picker组件重新封装 增加disabled属性--上文

admin管理员组

文章数量:1640942

前提：在微信小程序中，使用微信原声组件picker时，只能为当前picker设置disabled置灰功能，却不能使得picker组件中的具体某一选择项置灰，有时这种情况就会在某些功能上出现不适用的情况！！

所以这里重新封装了一个 custom-picker组件 ----类似picker组件，但是多了选择项置灰的功能

点击这里：微信小程序-picker组件重新封装 增加disabled属性--下文

如图所示：

当picker中某一项不可选择时，会如下图所示，颜色灰色，且用户不可点击选择。

代码始于这里： 

以下是在父组件orderInfo中使用子组件custom-picker

// orderInfo.wxml
<view class="cell-section">
    <text class="cell-title isrequired">付款方式</text>
    <view class="cell-input" bindtap="showCustomPicker" data-id="payWayList">
             <custom-picker 
             id='custom-picker-payWayList' 
             bindcustomEvent="bindcustomPickerChange" 
             value="{{code}}" 
             range="{{selectList.payWayList}}" 
             range-key="nameZH" 
             >
                <text class="{{form.paymentMethod ? '':'gray'}} weui-input">{{form.paymentMethod || '请选择'}}</text>
             </custom-picker>
     </view>
</view>


<view class="cell-section">
            <text class="cell-title isrequired">授信方式</text>
            <view class="cell-input" bindtap="showCustomPicker" data-id="creditMethodList">
              <custom-picker 
                id='custom-picker-creditMethodList'     
                bindcustomEvent="bindcustomPickerChange" 
                value="{{code}}" 
                range="{{selectList.creditMethodList}}" 
                range-key="nameZH">
                <text class="{{form.creditMethod ? '':'gray'}} weui-input">{{form.creditMethod || '请选择'}}</text>
              </custom-picker>
            </view>
</view>

 ⚠️这里使用this.selectComponent()方法获取子组件的实例

因页面中使用了多个 custom-picker 组件，所以每个custom-picker 组件的id需要必须唯一！这样才可分别拿到每个子组件的实例对象

// orderInfo.js

Page({
    // 触发customPicker.showPicker事件，显示选择框
    showCustomPicker(e){
    // 组件间通信，父组件可以通过this.selectComponent方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。
    const customPicker = this.selectComponent(`#custom-picker-${e.currentTarget.dataset.id}`) // 获得子组件实例对象
    customPicker.showPicker()
  },
    
    // 这里是自定义组件的回调事件
    bindcustomPickerChange(e){
        // 通过this.setData存储想要的数据
        console.log(e)
        const eValue = e.detail
        通过拿到相应的选择项的下角标值，做分析取值
        
        this.setData({
            。。。
        })

    }

})

// orderInfo.wxss
.isrequired::before{
  content: '*';
  display: block;
  color: #f00;
  position: absolute;
  left: 10rpx;
}
.cell-section {
  position: relative;
  display: flex;
  border-bottom: 1rpx solid #D9D9D9;
  margin-left: 15px;
}
.cell-title {
  margin-top: .77em;
  margin-bottom: .3em;
  padding-left: 15px;
  padding-right: 15px;
  color: #999999;
  font-size: 14px;
}
.cell-input {
  flex: 2;
  padding-right: 15px;
  text-align: right;
}
.gray {
  color: #6e6d6d;
}

 ----文件目录

// orderInfo.json
{
  "navigationBarTitleText": "订单详情",
  "usingComponents": {
    "custom-picker": "../components/customPicker/index"
  }
}

这里是下文：
微信小程序-picker组件重新封装 增加disabled属性--下文：custom-picker组件的封装https://blog.csdn/q1ngqingsky/article/details/122621678

本文标签： 上文组件属性程序微信小