百度智能小程序 滚动选择器
2020-08-28 15:41 更新
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/>
组件,其他节点不会显示。
以上内容是否对您有帮助:
更多建议: