List-term

2023-04-28 21:00

You can use the list-item component to customize items in a list.

Sample code

See the sample codes in different languages:

.json

copy

{
  "defaultTitle": "List",
  "usingComponents":{
    "list": "mini-ali-ui/es/list/index",
    "list-item": "mini-ali-ui/es/list/list-item/index"
  }}

.axml

copy

<list>
 <view slot="header">
   list header
 </view>
 <list-item thumb="http://thumb.link.png"
   arrow="{{true}}"
   onClick="onItemClick"
   upperSubtitle="upper subtitle"
   lowerSubtitle="lower subtitle" >
   main title
   <view slot="extra">
     additional information
   </view>
 </list-item>
 <view slot="footer">
   list footer
 </view></list>

.js

copy

Page({
 onItemClick() {
   my.alert({
     content: 'click the event on list item'
   })
 }})

Parameters

Property	Type	Description
arrow	Boolean	An indicator of whether to use an arrow. The default value is `true`.
thumb	String	URL of the thumbnail image.
index	String	The index that is used to record the position, which is returned in the event callback.
borderRadius	Boolean	An indicator of whether the list item is rounded. The default value is `false`.
upperSubtitle	String	Upper subtitle.
lowerSubtitle	String	Lower subtitle.
titlePosition	String	Title position. Valid values are: `top` `middle` `bottom` The default value is `top`.
thumbSize	String	Size of thumbnail image, which is required if thumb is specified. The default value is `40 px`.
onClick	Function	The event that is triggered when users tap the list item.
last	Boolean	An indicator of whether to display a line under the list item. The default value is `false`.

slot

Six slots are available for one list item. The following figure illustrates the name and position of each slot:

title component.png

Slot Name	Description
supporting	Header slot on the left side of the list item.
default	Default slot, which is used to display the title.
afterTitle	Slot on the right of the title, which is used to display lable or icon.
afterUpperSubtitle	Slot on the right of the upper subtitle, which is used to display lable or icon.
afterLowerSubtitle	Slot on the right of the lower subtitle, which is used to display lable or icon.
extra	Slot on the right side of the list item, which is used to display additional information.

FAQ

How do I remove the line under the last list item?

If you want to remove the line under the last list item, set the value of last as true.