嵌入页面的滚动选择器（picker-view）。

属性名 类型 默认值 描述
value Number Array - 数字表示
picker-view-column
中对应的 index （从 0 开始）
indicator-style String - 选中框样式
indicator-class String - 选中框的类名
mask-style String - 蒙层的样式
mask-class String - 蒙层的类名
onChange EventHandle - 滚动选择 value 改变时触发，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column index 索引 ,从 0 开始

说明：其中只可放置组件，其他节点不会显示。该组件请勿放入 hidden 或 display none 的节点内部，需要隐藏请用a:if切换。
推荐用法：

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

错误用法：

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

图示

picker-view - 图1

代码示例

  1. <!-- API-DEMO page/component/picker-view/picker-view.axml -->
  2. <view class="page">
  3.   <view class="page-description">嵌入页面的滚动选择器</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>春</view>
  19.           <view>夏</view>
  20.           <view>秋</view>
  21.           <view>冬</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. }