This topic describes picker-view
, the scroll selector embedded in a page.
Attribute | Type | Default value | Description | Minimum version |
value | Number Array | - | A number indicates the corresponding index, which starts from 0, in | - |
indicator-style | String | - | The style of the checkbox. | - |
indicator-class | String | - | The class name of the checkbox. | |
mask-style | String | - | The style of the mask. | |
mask-class | String | - | The class name of the mask. | |
onChange | EventHandle | - | Trigger when the scroll selection value is changed, where event.detail = {value: value}. Here, the value is an array, which indicates a picker-view-column index in picker-view. The index starts from 0. | - |
Note: Only components can be placed, and other nodes will not be displayed. Do not place this component in the hidden or display none node. To hide it, use a:if
to switch its state.
The recommended usage is as follows:
<view a:if="{{xx}}"><picker-view/></view>
The incorrect usage is as follows:
<view hidden><picker-view/></view>
Code sample
<!-- API-DEMO page/component/picker-view/picker-view.axml -->
<view class="page">
<view class="page-description">The scroll selector embedded in the page.</view>
<view class="page-section">
<view class="page-section-demo">
<picker-view value="{{value}}" onChange="onChange" class="my-picker">
<picker-view-column>
<view>2011</view>
<view>2012</view>
<view>2013</view>
<view>2014</view>
<view>2015</view>
<view>2016</view>
<view>2017</view>
<view>2018</view>
</picker-view-column>
<picker-view-column>
<view>Spring</view>
<view>Summer</view>
<view>Fall</view>
<view>Winter</view>
</picker-view-column>
</picker-view>
</view>
</view>
</view>
// API-DEMO page/component/picker-view/picker-view.js
Page({
data: {},
onChange(e) {
console.log(e.detail.value);
this.setData({
value: e.detail.value,
});
},
});
/* API-DEMO page/component/picker-view/picker-view.acss */
.my-picker {
background: #EFEFF4;
}