All Products
Search
Document Center

picker-view

Last Updated: Apr 19, 2021

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 picker-view-column. -
indicator-style String - The style of the checkbox. -
indicator-class String - The class name of the checkbox. 1.10
mask-style String - The style of the mask. 1.10
mask-class String - The class name of the mask. 1.10
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:

  1. <view a:if="{{xx}}"><picker-view/></view>

The incorrect usage is as follows:

  1. <view hidden><picker-view/></view>

Illustration

Code sample

  1. <!-- API-DEMO page/component/picker-view/picker-view.axml -->
  2. <view class="page">
  3. <view class="page-description">The scroll selector embedded in the page.</view>
  4. <view class="page-section">
  5. <view class="page-section-demo">
  6. <picker-view value="{{value}}" onChange="onChange" class="my-picker">
  7. <picker-view-column>
  8. <view>2011</view>
  9. <view>2012</view>
  10. <view>2013</view>
  11. <view>2014</view>
  12. <view>2015</view>
  13. <view>2016</view>
  14. <view>2017</view>
  15. <view>2018</view>
  16. </picker-view-column>
  17. <picker-view-column>
  18. <view>Spring</view>
  19. <view>Summer</view>
  20. <view>Fall</view>
  21. <view>Winter</view>
  22. </picker-view-column>
  23. </picker-view>
  24. </view>
  25. </view>
  26. </view>
  1. // API-DEMO page/component/picker-view/picker-view.js
  2. Page({
  3. data: {},
  4. onChange(e) {
  5. console.log(e.detail.value);
  6. this.setData({
  7. value: e.detail.value,
  8. });
  9. },
  10. });
  1. /* API-DEMO page/component/picker-view/picker-view.acss */
  2. .my-picker {
  3. background: #EFEFF4;
  4. }