PickerView

嵌入页面的滚动选择器。扫码体验：

img.jpg

属性名类型默认值描述最低版本
valueNumber Array数字表示 picker-view-column 中对应的 index （从 0 开始）
indicator-styleString选中框样式
indicator-classString选中框的类名1.10
mask-styleString蒙层的样式1.10
mask-classString蒙层的类名1.10
onChangeEventHandle滚动选择 value 改变时触发，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column index 索引 ,从 0 开始
注意：其中只可放置组件，其他节点不会显示。该组件请勿放入 hidden 或 display none 的节点内部，需要隐藏请用 a:if 切换。

不要：

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

推荐：

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

Screenshot

image

示例代码

  1. <view class="pv-container">
  2.   <view class="pv-left">
  3.     <picker-view value="{{value}}" onChange="onChange">
  4.       <picker-view-column>
  5.         <view>2013</view>
  6.         <view>2014</view>
  7.       </picker-view-column>
  8.       <picker-view-column>
  9.         <view>春</view>
  10.         <view>夏</view>
  11.       </picker-view-column>
  12.     </picker-view>
  13.   </view>
  14.   <view class="pv-right">
  15.     {{value}}
  16.   </view>
  17. </view>
  1. Page({
  2.   data: {},
  3.   onChange(e) {
  4.     console.log(e.detail.value);
  5.     this.setData({
  6.       value: e.detail.value,
  7.     });
  8.   },
  9. });

原文: https://docs.alipay.com/mini/component/picker-view