picker-view - Mobile Platform as a Service - Alibaba Cloud Documentation Center

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:

<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;
}