picker

2021-02-26 08:05

Scroll picker pop-up from bottom.

Attribute Name	Type	Default	Description	Minimum Version
range	String[] / Object[]	[]	For String[], indicating selectable string list; for Object[], specifying the range-key to indicate the selectable fields
range-key	String		When the range is an Object[], the range-key is used to specify the key value in the Object as the picker displaying contents
value	Number		indicating which one is selected in the range (subscript starting from 0)
onChange	EventHandle		trigger on value change, event.detail = {value: value}
disabled	Boolean	false	disable 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,
    });
  },
});