admin管理员组文章数量:1640601
前提:在微信小程序中,使用微信原声组件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
版权声明:本文标题:微信小程序-picker组件重新封装 增加disabled属性--上文 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1729318290a1195567.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论