阅读(2289)
赞(11)
百度智能小程序 滚动选择器
2020-08-11 17:37:17 更新
picker-view 滚动选择器
解释：可嵌页面的滚动选择器
属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 | ||
|---|---|---|---|---|---|---|
|
value |
|
[] |
否 |
数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。 |
||
|
indicator-style |
String |
否 |
设置选择器中间选中框的样式 |
|||
|
indicator-class |
String |
否 |
设置选择器中间选中框的类名 |
|||
|
mask-style |
String |
否 |
设置蒙层的样式 |
|||
|
mask-class |
String |
否 |
设置蒙层的类名 |
|||
|
bindchange |
EventHandle |
否 |
当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value 为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始） |
|||
示例
代码示例
<view class="wrap">
<view class="card-area">
<view class="selected-date">{{year}}年{{month}}月{{day}}日</view>
<picker-view
indicator-style ="color: #74fa7d"
mask-class="maskStyle"
style="width: 100%;
height: 300px;"
value="{{value}}"
bindchange="bindChange">
<picker-view-column>
<view s-for="item in years" class="item">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view s-for="item in months" class="item">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view s-for="item in days" class="item">{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
</view>Bug & Tip
- Tip：其中只可放置
<picker-view-column/>组件，其他节点不会显示。