如何设置选择器Picker_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

Picker 选择器显示一个或多个选项集合的可滚动列表，相比较于原生 picker 实现了 iOS 端与 Android 端体验一致性。当少于 5 个选项时，建议直接将选项平铺，使用 Radio。

属性

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

属性	类型	必填	说明	默认值
value	PickerColumnItem \| (PickerColumnItem)[]	否	选中数据	-
data	PickerColumnItem 数组	是	picker 数据，配置每一列的选项	[]
placeholder	string	否	提示文案	-
disabled	boolean	否	是否禁用	false
title	string	否	弹出框标题	-
okText	string	否	确认按钮文案	'确定'
dismissText	string	否	取消文案	'取消'
maskStyle	string	否	蒙层的样式	-
maskClass	string	否	蒙层的类名	-
indicatorStyle	string	否	选中框样式	-
indicatorClass	string	否	选中框的类名	-
className	string	否	类名	-

事件

事件名	说明	类型
onOk	点击确定按钮，触发回调	`(value: PickerColumnItem, column: PickerColumnItem ) => void`
onDismiss	点击取消按钮，触发回调	`() => void`
onChange	选中项发生变化，触发回调	`(value: PickerColumnItem, column: PickerColumnItem) => void`
onFormat	选中值的文本显示格式	`(value: PickerColumnItem, column: PickerColumnItem) => string`
onTriggerPicker	弹出框显示/隐藏状态变化触发	`(visible:boolean) => void`

插槽

名称	说明	类型
default	文本区域标签名称	作用域插槽，接收选中的 value 参数
title	弹窗窗体标题名称	-

样式类

类名	说明
amd-picker	文本展示区域样式
amd-picker-placeholder	placeholder 样式
amd-picker-popup	弹窗整体样式
amd-picker-header	弹窗头部区域样式
amd-picker-header-item	弹窗头部区域文本样式
amd-picker-content	选择区域样式
amd-picker-content-item	选择区域单个选项样式

代码示例

基本使用

index.axml 的代码示例如下：

<demo-block title="基础用法" padding="0">
  <list-item>
    选择城市
    <picker 
      slot="extra"
      onDismiss="handleCancelPicker"
      onOk="handleOk"
      value="{{value}}"
      placeholder="请选择"
      title="请选择"
      onChange="handleChange"
      data="{{cityList}}">
    </picker>
  </list-item>
</demo-block>

<demo-block title="对象用法"  padding="0">
<list-item>
  选择日期
  <picker 
    slot="extra"
    onDismiss="handleCancelPicker"
    onOk="handleOk"
    placeholder="请选择"
    title="请选择"
    onChange="handleChange"
    data="{{weekList}}">
  </picker>
</list-item>
</demo-block>

<demo-block title="多列复杂类型数据" padding="0">
<list-item>
  请选择时间
  <picker 
    slot="extra"
    placeholder="请选择"
    value="{{['Tues', 'pm']}}"
    title="请选择"
    onOk="handleOk"
    onFormat="formatTime"
    data="{{columns}}">
  </picker>
</list-item>
</demo-block>

index.js 的代码示例如下：

Page({
  data: {
    value: '上海',
    cityList: ['北京', '上海', '深圳', '广州', '南京', '武汉', '无锡', '苏州'],
    weekList: [
      { label: '周一', value: 'Mon' },
      { label: '周二', value: 'Tues' },
      { label: '周三', value: 'Wed' },
      { label: '周四', value: 'Thur' },
      { label: '周五', value: 'Fri' },
    ],
    columns: [
      [
        { label: '周一', value: 'Mon' },
        { label: '周二', value: 'Tues' },
        { label: '周三', value: 'Wed' },
        { label: '周四', value: 'Thur' },
        { label: '周五', value: 'Fri' },
      ],
      [
        { label: '上午', value: 'am' },
        { label: '下午', value: 'pm' },
      ],
    ],
  },

  handleCancelPicker() {
    my.showToast({
      content: '取消操作，关闭 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('')
  },
});

index.acss 的代码示例如下：

.pickerTips {
  padding: 24rpx;
}

.pickerTips text {
  color: #1677ff;
}

.pickerItem {
  display: inline-block;
}

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