全部产品
云市场

picker-view

更新时间:2019-09-09 15:18:40

本文介绍嵌入页面的滚动选择器(picker-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 开始 -
说明:其中只可放置组件,其他节点不会显示。该组件请勿放入 hidden 或 display none 的节点内部,需要隐藏请用 a:if 切换。

推荐用法:

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

错误用法:

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

图示

代码示例

  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. }