如何使用picker组件_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

本文介绍从底部弹起的滚动选择器（picker）。

属性名	类型	默认值	描述	最低版本
range	String[] / Object[]	[]	当类型为 String[] 时，表示可选择的字符串列表；当类型为 Object[] 时，需指定 range-key 来表示可选择的字段。	-
range-key	String	-	当 range 是一个 Object[] 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容。	-
value	Number	-	表示选择了 range 中的第几个（下标从 0 开始）。	-
onChange	EventHandle	-	value 改变时触发，event.detail = {value: value} 。	-
disabled	Boolean	false	是否禁用	-

图示

代码示例

<view class="section">
  <view class="section-title">地区选择器</view>
  <picker onChange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      当前选择：{{array[index]}}
    </view>
  </picker>
  <picker onChange="bindObjPickerChange" value="{{arrIndex}}" range="{{objectArray}}" range-key="name">
    <view class="row">
      <view class="row-title">ObjectArray</view>
      <view class="row-extra">当前选择：{{objectArray[arrIndex].name}}</view>
      <image class="row-arrow" src="/image/arrowright.png" mode="aspectFill" />
    </view>
  </picker>
</view>

Page({
  data: {
    array: ['中国', '美国', '巴西', '日本'],
    objectArray: [
      {
        id: 0,
        name: '美国',
      },
      {
        id: 1,
        name: '中国',
      },
      {
        id: 2,
        name: '巴西',
      },
      {
        id: 3,
        name: '日本',
      },
    ],
    arrIndex: 0,
    index: 0
  },
  bindPickerChange(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value);
    this.setData({
      index: e.detail.value,
    });
  },
  bindObjPickerChange(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value);
    this.setData({
      arrIndex: e.detail.value,
    });
  },
});