All Products
Search
Document Center

PickerItem

Last Updated: Feb 04, 2021

This section describes PickerItem, the selection input.

Property Description Type Default value
className Custom class String -
labelCls Class of the custom labels. String -
pickerCls Class of the custom areas. String -
last Whether it is the last line. Boolean false
value Initial content String -
name The component name, which is used to submit the form to obtain data. String -
placeholder The placeholder. String -
onPickerTap Triggered when you tap pickeritem. (e: Object) => void -

slots

slotname Description
extra Used to render the description of picker-item on the right. This property is optional.

Sample code

  1. {
  2. "defaultTitle": "AntUI component library of the Mini Program",
  3. "usingComponents": {
  4. "list": "mini-antui/es/list/index",
  5. "list-item": "mini-antui/es/list/list-item/index",
  6. "picker-item": "mini-antui/es/picker-item/index",
  7. "input-item": "mini-antui/es/input-item/index"
  8. }
  9. }
  1. <view>
  2. <list>
  3. <input-item
  4. data-field="password"
  5. placeholder="Password"
  6. password
  7. >
  8. Password
  9. </input-item>
  10. <picker-item
  11. data-field="bank"
  12. placeholder="Select the card-issuing bank"
  13. value="{{bank}}"
  14. onPickerTap="onSelect"
  15. >
  16. Card-issuing bank
  17. </picker-item>
  18. </list>
  19. </view>
  1. const banks = ['MYbank', 'China Construction Bank', 'Industrial and Commercial Bank of China', 'Shanghai Pudong Development Bank'];
  2. Page({
  3. data: {
  4. bank: '',
  5. },
  6. onSelect() {
  7. my.showActionSheet({
  8. title: 'Select the card-issuing bank',
  9. items: banks,
  10. success: (res) => {
  11. this.setData({
  12. bank: banks[res.index],
  13. });
  14. },
  15. });
  16. },
  17. });