List

2024-05-31 10:14

List

Property	Description	Type
className	Custom class.	String

Slots

slotName	Description
header	Optional, list header.
footer	Optional, used to render list footer.

List-item

Property	Description	Type	Default
className	Custom class.	String
thumb	Thumbnail, picture address.	String
arrow	With arrow or not.	Boolean	false
align	Vertical alignment of sub-elements, choices: `top` ,`middle` ,`bottom`	String	middle
index	Unique index of list item.	String
onClick	Call this function when clicking list-item.	({index, target}) => void
last	If it is the last list item.	Boolean	false
disabled	Not clickable, no hover effect.	Boolean	false
multipleLine	Multiple lines.	Boolean	false
wrap	Wrap or not. By default, excessive text length is hidden.	Boolean	false

Slots

slotname	Description
extra	Optional, used to render right-hand notes of list item.
prefix	Optional, used to render left-hand notes of list item.

Example

copy
{
  "defaultTitle": "AntUI Component Library",
  "usingComponents": {
    "list": "mini-antui/es/list/index",
    "list-item": "mini-antui/es/list/list-item/index"
  }
}

copy
<view>
  <list>
    <view slot="header">
      List Header
    </view>
    <block a:for="{{items}}">
      <list-item
        thumb="{{item.thumb}}"
        arrow="{{item.arrow}}"
        align="{{item.align}}"
        index="{{index}}"
        onClick="onItemClick"
        key="items-{{index}}"
        last="{{index === (items.length - 1)}}"
      >
      {{item.title}}
        <view class="am-list-brief">{{item.brief}}</view>
        <view slot="extra">
          {{item.extra}}
        </view>
      </list-item>
    </block>
    <view slot="footer">
      List footer
    </view>
  </list>
  <list>
    <view slot="header">
      List Header
    </view>
    <block a:for="{{items2}}">
      <list-item
        thumb="{{item.thumb}}"
        arrow="{{item.arrow}}"
        onClick="onItemClick"
        index="items2-{{index}}"
        key="items2-{{index}}"
        last="{{index === (items2.length - 1)}}"
      >
       {{item.title}}
        <view class="am-list-brief">{{item.brief}}</view>
        <view a:if="{{item.extra}}" slot="extra">
          {{item.extra}}
        </view>
      </list-item>
    </block>
    <view slot="footer">
      List footer
    </view>
  </list>
</view>

copy
Page({
  data: {
    items: [
      {
        title: 'Simple List',
        extra: 'Details',
      },
    ],
    items2: [
      {
        title: 'Complex List',
        arrow: true,
      },
      {
        title: 'Complex List',
        arrow: 'up',
      },
      {
        title: 'Complex List',
        arrow: 'down',
      },
      {
        title: 'Complex List',
        arrow: 'empty',
      },
      {
        title: 'Complex List',
      },
    ],
  },
  onItemClick(ev) {
    my.alert({
      content: `Click the ${ev.index} row`,
    });
  },
});