picker-view
更新时间：2025-04-10 15:30:02
picker-view
嵌入页面的滚动选择器。其中只可放置 picker-view-column组件，其它节点不会显示。
属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| value | array | 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。 | ||
| indicator-style | string | 设置选择器中间选中框的样式 | ||
| indicator-class | string | 设置选择器中间选中框的类名 | ||
| mask-style | string | 设置蒙层的样式 | ||
| mask-class | string | 设置蒙层的类名 | ||
| bindchange | eventhandle | 滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始） | ||
| bindpickstart | eventhandle | 当滚动选择开始时候触发事件 | ||
| bindpickend | eventhandle | 当滚动选择结束时候触发事件 |
扫码预览
组件示例
html
<div id="picker-container">
<picker-view
value="[0, 1]"
indicator-style="height: 50px; line-height: 50px;"
indicator-class="indicator"
mask-style="background-color: rgba(0, 0, 0, 0.2);"
mask-class="mask"
bindchange="onPickerChange"
bindpickstart="onPickStart"
bindpickend="onPickEnd">
<picker-view-column>
<div>选项 1</div>
<div>选项 2</div>
<div>选项 3</div>
</picker-view-column>
<picker-view-column>
<div>A</div>
<div>B</div>
<div>C</div>
</picker-view-column>
</picker-view>
</div>
该文档是否对您有帮助？