Picker

Properties

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

Property	Type	Required	Description	Default value
value	PickerColumnItem | (PickerColumnItem)[]	No	Selected data	-
data	Array of PickerColumnItem	Yes	Options for each column.	[]
placeholder	string	No	Placeholder text.	-
disabled	boolean	No	Whether to disable the picker.	false
title	string	No	Title of the pop-up.	-
okText	string	No	Text for the confirm button.	'OK'
dismissText	string	No	Text for the cancel button.	'Cancel'
maskStyle	string	No	Style of the mask layer.	-
maskClass	string	No	Class name of the mask layer.	-
indicatorStyle	string	No	Selection box style.	-
indicatorClass	string	No	Class name of the selection indicator.	-
className	string	No	The class name.	-

Events

Event Name	Description	Type
onOk	Triggered when the OK button is clicked.	(value: PickerColumnItem, column: PickerColumnItem ) => void
onDismiss	Triggered when the Cancel button is clicked.	() => void
onChange	Triggered when the selected value changes.	(value: PickerColumnItem, column: PickerColumnItem) => void
onFormat	Formats the display text of the selected value.	(value: PickerColumnItem, column: PickerColumnItem) => string
onTriggerPicker	Triggered when the pop-up visibility changes.	(visible:boolean) => void

Slots

Name	Description	Type
default	Text area label	Scoped slot that receives the selected value parameter.
title	Title of the pop-up window.	-

Style classes

Class name	Description
amd-picker	Style for the text display area.
amd-picker-placeholder	Style for the placeholder.
amd-picker-popup	Style for the entire pop-up.
amd-picker-header	Style for the pop-up header.
amd-picker-header-item	Style for the text in the pop-up header.
amd-picker-content	Style for the selection area.
amd-picker-content-item	Style for a single option in the selection area.

Code examples

Basic usage

The following sample shows index.axml:

<demo-block title="Basic Usage" padding="0">
  <list-item>
    Select City
    <picker 
      slot="extra"
      onDismiss="handleCancelPicker"
      onOk="handleOk"
      value="{{value}}"
      placeholder="Select"
      title="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="Select"
    title="Select"
    onChange="handleChange"
    data="{{weekList}}">
  </picker>
</list-item>
</demo-block>

<demo-block title="Multi-column Complex Data" padding="0">
<list-item>
  Select Time
  <picker 
    slot="extra"
    placeholder="Select"
    value="{{['Tues', 'pm']}}"
    title="Select"
    onOk="handleOk"
    onFormat="formatTime"
    data="{{columns}}">
  </picker>
</list-item>
</demo-block>

The following sample shows index.js:

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: 'AM', value: 'am' },
        { label: 'PM', value: 'pm' },
      ],
    ],
  },

  handleCancelPicker() {
    my.showToast({
      content: 'Operation canceled. Closing 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 sample shows index.acss:

.pickerTips {
  padding: 24rpx;
}

.pickerTips text {
  color: #1677ff;
}

.pickerItem {
  display: inline-block;
}

The following sample shows index.json:

{
  "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"
  }
}