• 下载
  • 社区

picker-view 滚动选择器

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

扫码体验

qrcode for picker-view

效果示例

The screenshot of picker-view

示例代码

<!-- 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>

属性

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

常见问题

picker-view 如何隐藏和显示?

该组件内部请勿放入 hidden 或 display none 的节点,需要隐藏请用 a:if 切换。

picker-view 如何去掉背景的透明值?

不支持设置成透明,可以修改颜色。

如何获取 picker-view 滚动选择器的值?

可以先获取索引 index 然后通过 index 获取数组中值。