Picker - Mobile Platform as a Service - Alibaba Cloud Documentation Center

A Picker component displays a scrollable list of one or more option sets, offering consistent experiences for iOS and Android users compared with the native Picker component. When there are less than 5 options, we recommend that you directly tile the options and use radio buttons.

Property

type PickerColumnItem = string | number | {
  label: string
  value: string|number
}

Property	Type	Required	Description	Default value
value	PickerColumnItem \| (PickerColumnItem)[]	No	The selected data.	-
data	PickerColumnItem array	Yes	The picker data for configuring options of each column.	[]
placeholder	string	No	The prompt message.	-
disabled	boolean	No	Whether to disable the component.	false
title	string	No	The title of the popup dialog.	-
okText	string	No	The text on the confirmation button.	'Confirm'
dismissText	string	No	The text on the cancellation button.	'Cancel'
maskStyle	string	No	The style of the mask layer.	-
maskClass	string	No	The class name of the mask layer.	-
indicatorStyle	string	No	The style of the selected item.	-
indicatorClass	string	No	The class name of the selected item.	-
className	string	No	The class name.	-

Event

Event name	Description	Type
onOk	Callback fired when the confirmation button is tapped.	`(value: PickerColumnItem, column: PickerColumnItem ) => void`
onDismiss	Callback fired when the cancellation button is tapped.	`() => void`
onChange	Callback fired when the selected item is changed.	`(value: PickerColumnItem, column: PickerColumnItem) => void`
onFormat	The text display format of the selected value.	`(value: PickerColumnItem, column: PickerColumnItem) => string`
onTriggerPicker	Callback fired when the status of the popup dialog is changed (from hidden to visible or vice versa).	`(visible:boolean) => void`

Slot

Name	Description	Type
default	The tag name of the text area.	The slot-scope, which receives the selected value parameter.
title	The name of the title in the popup dialog.	-

Style class

Class name	Description
amd-picker	The style of the text display area.
amd-picker-placeholder	The placeholder style.
amd-picker-popup	The style of the entire popup dialog.
amd-picker-header	The style of the header area in the popup dialog.
amd-picker-header-item	The text style of the header area in the popup dialog.
amd-picker-content	The style of the selection area.
amd-picker-content-item	The style of a single option in the selection area.

Code sample

Basic usage

The following shows an example of the code in the index.axml file:

<demo-block title="Basic usage" padding="0">
  <list-item>
    Select city
    <picker 
      slot="extra"
      onDismiss="handleCancelPicker"
      onOk="handleOk"
      value="{{value}}"
      placeholder="Please select"
      title="Please select"
      onChange="handleChange"
      data="{{cityList}}">
    </picker>
  </list-item>
</demo-block>

<demo-block title="Object usage"  padding="0">
<list-item>
  Select date
  <picker 
    slot="extra"
    onDismiss="handleCancelPicker"
    onOk="handleOk"
    placeholder="Please select"
    title="Please select"
    onChange="handleChange"
    data="{{weekList}}">
  </picker>
</list-item>
</demo-block>

<demo-block title="Multi-column complex type data" padding="0">
<list-item>
  Please select time
  <picker 
    slot="extra"
    placeholder="Please select"
    value="{{['Tues', 'pm']}}"
    title="Please select"
    onOk="handleOk"
    onFormat="formatTime"
    data="{{columns}}">
  </picker>
</list-item>
</demo-block>

The following shows an example of the code in the index.js file:

Page({
  data: {
    value: 'Shanghai',
    cityList: ['Beijing', 'Shanghai', 'Shenzhen', 'Guangzhou', 'Nanjing', 'Wuhan', 'Wuxi', 'Suzhou'],
    weekList: [
      { label: 'Monday', value: 'Mon' },
      { label: 'Tuesday', value: 'Tues' },
      { label: 'Wednesday', value: 'Wed' },
      { label: 'Thursday', value: 'Thur' },
      { label: 'Friday', value: 'Fri' },
    ],
    columns: [
      [
        { label: 'Monday', value: 'Mon' },
        { label: 'Tuesday', value: 'Tues' },
        { label: 'Wednesday', value: 'Wed' },
        { label: 'Thursday', value: 'Thur' },
        { label: 'Friday', value: 'Fri' },
      ],
      [
        { label: 'Morning', value: 'am' },
        { label: 'Afternoon', value: 'pm' },
      ],
    ],
  },

  handleCancelPicker() {
    my.showToast({
      content: 'Cancel the operation and close the picker',
    });
  },

  handleOk(value, column) {
    console.log('onOk value', value, 'onOk  column', column);
  },

  handleChange(value, column) {
    console.log('onChange value', value, 'onChange  column', column);
  },

  formatTime(value, column) {
    return column.map(c => c && c.label).join('')
  },
});

The following shows an example of the code in the index.acss file:

.pickerTips {
  padding: 24rpx;
}

.pickerTips text {
  color: #1677ff;
}

.pickerItem {
  display: inline-block;
}

The following shows an example of the code in the index.json file:

{
  "defaultTitle": "Picker",
  "usingComponents": {
    "picker": "antd-mini/es/Picker/index",
    "list": "antd-mini/es/List/index",
    "list-item": "antd-mini/es/List/ListItem/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}