picker

2022-07-04 03:44

Scroll picker pop-up from bottom

Property	Type	Default	Description
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

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: ['Country1', 'Country2', 'Country3', 'Country4'],
    objectArray: [
      {
        id: 0,
        name: 'Country1',
      },
      {
        id: 1,
        name: 'Country2',
      },
      {
        id: 2,
        name: 'Country3',
      },
      {
        id: 3,
        name: 'Country4',
      },
    ],
    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,
    });
  },
});