如何使用PickerItem组件_移动研发平台mPaaS-阿里云帮助中心

本文介绍选择输入（PickerItem）。

属性名	描述	类型	默认值
className	自定义的 class	String	-
labelCls	自定义 label 的 class	String	-
pickerCls	自定义选择区域的 class	String	-
last	是否最后一行	Boolean	false
value	初始内容	String	-
name	组件名字，用于表单提交获取数据	String	-
placeholder	占位符	String	-
onPickerTap	点击 pickeritem 时触发	(e: Object) => void	-

slots

slotname	说明
extra	可选，用于渲染 picker-item 项右边说明

代码示例

{
  "defaultTitle": "小程序AntUI组件库",
  "usingComponents": {
    "list": "mini-antui/es/list/index",
    "list-item": "mini-antui/es/list/list-item/index",
    "picker-item": "mini-antui/es/picker-item/index",
    "input-item": "mini-antui/es/input-item/index"
  }
}

<view>
  <list>
    <input-item
      data-field="password"
      placeholder="密码"
      password
    >
      密码
    </input-item>
    <picker-item
      data-field="bank"
      placeholder="选择发卡银行"
      value="{{bank}}"
      onPickerTap="onSelect"
    >
      发卡银行
    </picker-item>
  </list>
</view>

const banks = ['网商银行', '建设银行', '工商银行', '浦发银行'];
Page({
  data: {
    bank: '',
  },
  onSelect() {
    my.showActionSheet({
      title: '选择发卡银行',
      items: banks,
      success: (res) => {
        this.setData({
          bank: banks[res.index],
        });
      },
    });
  },
});