List

2022-07-29 06:32

List.

List

Attribute Name	Description	Type	Default
className	Custom class	String

Slots

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

List-item

Attribute	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`,
    });
  },
});