picker

Scroll picker pop-up from bottom.

Attribute NameTypeDefaultDescriptionMinimum Version
rangeString[] / Object[][]For String[], indicating selectable string list; for Object[], specifying the range-key to indicate the selectable fields
range-keyStringWhen the range is an Object[], the range-key is used to specify the key value in the Object as the picker displaying contents
valueNumberindicating which one is selected in the range (subscript starting from 0)
onChangeEventHandletrigger on value change, event.detail = {value: value}
disabledBooleanfalsedisable or not

Screenshot

picker

Sample Code

copy
<view class="section">
  <view class="section-title"> region picker</view>
  <picker onChange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      Current selection{{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">Current selection:{{objectArray[arrIndex].name}}</view>
      <image class="row-arrow" src="/image/arrowright.png" mode="aspectFill" />
    </view>
  </picker>
</view>
copy
Page({
  data: {
    array: ['China', 'USA', 'Brazil', 'Japan'],
    objectArray: [
      {
        id: 0,
        name: 'USA',
      },
      {
        id: 1,
        name: 'China',
      },
      {
        id: 2,
        name: 'Brazil',
      },
      {
        id: 3,
        name: 'Japan',
      },
    ],
    arrIndex: 0,
    index: 0
  },
  bindPickerChange(e) {
    console.log('picker sends selection change, carried value ', e.detail.value);
    this.setData({
      index: e.detail.value,
    });
  },
  bindObjPickerChange(e) {
    console.log('picker sends selection change, carried value ', e.detail.value);
    this.setData({
      arrIndex: e.detail.value,
    });
  },
});