支付寶小程序表單組件 滾動選擇器·Picker View

嵌入頁面的滾動選擇器。 其中只可放置 picker-view-column 組件，其它節(jié)點不會顯示。

說明：

• 該組件內(nèi)部請勿放入 hidden 或 display none 的節(jié)點，需要隱藏請用 a:if 切換。
• 不支持背景色設(shè)置成透明，可以修改顏色。
• 可以先獲取索引 index 然后通過 index 獲取數(shù)組中值。

掃碼體驗

示例代碼

<!-- 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 中，其孩子節(jié)點的高度會自動設(shè)置成與 picker-view 的選中框的高度一致。

說明： 該組件內(nèi)部請勿放入 hidden 或 display none 的節(jié)點，需要隱藏請用 a:if 切換，即：

推薦：

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

不要：

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

屬性