支付宝小程序表单组件 滚动选择器·Picker View

嵌入页面的滚动选择器。 其中只可放置 picker-view-column 组件，其它节点不会显示。

说明：

• 该组件内部请勿放入 hidden 或 display none 的节点，需要隐藏请用 a:if 切换。
• 不支持背景色设置成透明，可以修改颜色。
• 可以先获取索引 index 然后通过 index 获取数组中值。

扫码体验

示例代码

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

picker-view-column 滚动选择器子项

滚动选择器子项。仅可放置于 picker-view 中，其孩子节点的高度会自动设置成与 picker-view 的选中框的高度一致。

说明： 该组件内部请勿放入 hidden 或 display none 的节点，需要隐藏请用 a:if 切换，即：

推荐：

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

不要：

<view hidden><picker-view/></view>

属性