文档

选择器(Picker)

更新时间:

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"
  }
}
  • 本页导读 (0)
文档反馈