List

Properties

List

Property	Type	Required	Default value	Description
radius	boolean	No	false	Whether to apply rounded corners.
header	string	No	-	The header description text.
footer	string	No	-	The footer description text.
className	string	No	-	The class name.

ListItem

Property	Type	Required	Default value	Description
image	string	No	-	The image on the left.
imageSize	'small' | 'medium' | 'large'	No	-	The image size.
arrow	'right' | 'up' | 'down'	No	-	The arrow direction. If not set, no arrow is displayed.
title	string	No	-	The title of the list item.
brief	string	No	-	The information on the second line.
extra	string	No	-	Additional content on the right.
extraBrief	string	No	-	Supplementary text on the right.
disabled	boolean	No	false	Whether to disable the list item.
last	boolean	No	false	Whether to display the underline.
className	string	No	-	The class name.

Slots

Name	Description
header	Header content.
footer	Footer content.

Name	Description
brief	Brief content below the title.
extra	Content on the right.
image	Icon on the left.

Events

Event name	Description	Type
onTap	Triggered when the list item is tapped.	( e: Event ) => void

Style classes

Class name	Description
amd-list	The overall style.
amd-list-header	The style of the header.
amd-list-body	The body content style.
amd-list-footer	The style of the footer.

Class name	Description
amd-list-item	The overall style.
amd-list-item-line	The style of the content.
amd-list-item-content	The style of the content, excluding `extra` and `brief`.
amd-list-item-content-main	The style of the main content.
amd-list-item-image	The style of the image on the left.
amd-list-item-brief	The style of `brief`.
amd-list-item-extra	The style of `extra`.
amd-list-item-arrow	The style of the arrow on the right.

Code examples

Basic usage

Example of index.axml:

<view>
  <list header="Basic usage"  radius="{{radius}}">
    <list-item>1</list-item>
    <list-item>2</list-item>
    <list-item>3</list-item>
  </list>
  <list header="Clickable list"  radius="{{radius}}">
    <list-item image="UnorderedListOutline" arrow="right" onTap="handleTap" data-info="Bill">Bill</list-item>
    <list-item image="PayCircleOutline" arrow="right" onTap="handleTap" data-info="Total assets">Total assets</list-item>
    <list-item image="SetOutline" arrow="right" onTap="handleTap" data-info="Settings">Settings</list-item>
  </list>
  <list 
    radius="{{radius}}" 
    header="Complex layout">
    <list-item>
      Border radius
      <switch slot="extra" checked="{{radius}}" onChange="handleSetRadius"/>
    </list-item>
    <list-item 
      extraBrief="Not enabled"
      arrow="right">
        Large font size mode
    </list-item>
    <list-item 
      brief="Manage authorized products and devices"
      arrow="{{item.arrow}}">
      Authorization management
    </list-item>
    <list-item 
      title="Title"
      brief="Description"
      image="AlipaySquareFill" 
      extra="Secondary information"
      imageSize="large"
      extraBrief="Secondary supplementary information"
      arrow="right">
      Three-line list
    </list-item>
  </list>
  <list 
    radius="{{radius}}" 
    header="Disabled state">
    <list-item disabled image="UnorderedListOutline" arrow="right" data-info="Bill">Bill</list-item>
    <list-item disabled image="PayCircleOutline" arrow="right" data-info="Total assets">Total assets</list-item>
  </list>
  <white-space />
</view>

Example of index.js:

Page({
  data: {
    radius: false,
    list: [
      {
        info: 'The first list-item was clicked',
        image:
          'https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*XMCgSYx3f50AAAAAAAAAAABkARQnAQ',
        arrow: 'right',
        content: 'First list-item',
      },
      {
        info: 'The second list-item was clicked',
        image: 'AlipaySquareFill',
        arrow: 'right',
        content: 'Second list-item',
      },
      {
        info: 'The third list-item was clicked',
        image: '',
        arrow: 'right',
        content: 'Third list-item',
      },
    ],
  },
  handleTap(e) {
    my.alert({
      title: 'onTap',
      content: e.currentTarget.dataset.info,
    });
  },
  handleSetRadius(checked) {
    this.setData({
      radius: checked,
    });
  },
});

Example of index.acss:

.customImage {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 12rpx;
  color: red;
  background-color: #e5e5e5;
  border-radius: 12rpx;
  box-sizing: border-box;
}

Example of index.json:

{
  "defaultTitle": "List",
  "usingComponents": {
    "list": "antd-mini/es/List/index",
    "list-item": "antd-mini/es/List/ListItem/index",
    "white-space": "../../components/WhiteSpace/index",
    "switch": "antd-mini/es/Switch/index"
  }
}