支付宝小程序扩展表单 选择输入·PickerItem
选择输入。
扫码体验
示例代码
{
"defaultTitle": "Picker-item",
"usingComponents": {
"list": "mini-ali-ui/es/list/index",
"picker-item": "mini-ali-ui/es/picker-item/index"
}
}<view>
<list>
<picker-item
data-field="bank"
placeholder="选择发卡银行"
value="{{bank}}"
onPickerTap="onPickerTap"
>
发卡银行
</picker-item>
<picker-item
data-field="bank"
placeholder="选择发卡银行"
value="{{bank}}"
onPickerTap="onPickerTap"
layer="vertical"
>
发卡银行
</picker-item>
</list>
</view>const banks = ['网商银行', '建设银行', '工商银行', '浦发银行'];
Page({
data: {
bank: '',
},
onPickerTap() {
my.showActionSheet({
title: '选择发卡银行',
items: banks,
success: (res) => {
this.setData({
bank: banks[res.index],
});
},
});
},
});属性
| 属性 | 类型 | 默认值 | 可选 | 描述 | 最低版本 |
|---|---|---|---|---|---|
| className | String | - | - | 自定义的 class | - |
| labelCls | String | - | - | 自定义 label 的 class | - |
| pickerCls | String | - | - | 自定义选择区域的 class | - |
| last | Boolean | false | - | 是否最后一行 | - |
| value | String | - | - | 初始内容 | - |
| placeholder | String | - | - | picker-item 的值 | - |
| onPickerTap | (e: Object) => void | - | - | 点击 pickeritem 时触发 | - |
| layer | String | '' | vertical | 文本输入框是否为垂直排列，vertical 时为垂直排列，空值为横向排列 | 1.0.4 |
| iconType | String | 'right' | - | 更改 picker-item 的 icon 类型，参考 Am-icon 的 type 值 | 1.0.12 |
slots
| slotname | 说明 | 必填 |
|---|---|---|
| extra | 用于渲染 picker-item 项右边说明。 | 否 |