All Products
Search
Document Center

List

Last Updated: Feb 04, 2021

This section describes the list component.

list

Property Description Type Default value
className Custom class String -

slots

slotName Description
header Top of the list, which is optional.
footer Used to render the bottom of the list, which is optional.

list-item

Attribute Description Type Default value
className Custom class String -
thumb Thumbnail address String -
arrow Whether there are arrows. Boolean false
align Vertical alignment of child elements. The value can be top, middle, bottom. String middle
index Unique index of a list item. String -
onClick The function is called when you tap list-item. ({index, target}) => void -
last Whether it is the last item in the list. Boolean false
disabled Tapping forbidden and no hover effect. Boolean false
multipleLine Multiple lines. Boolean false
wrap Whether to break a line. The text will be hidden by default if it is too long. Boolean false

slots

slotname Description
extra Used to render the list item description on the right, which is optional.
prefix Used to render the list description on the left, which 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. }
  7. }
 
  1. <view>
  2. <list>
  3. <view slot="header">
  4. Head of the list.
  5. </view>
  6. <block a:for="{{items}}">
  7. <list-item
  8. thumb="{{item.thumb}}"
  9. arrow="{{item.arrow}}"
  10. align="{{item.align}}"
  11. index="{{index}}"
  12. onClick="onItemClick"
  13. key="items-{{index}}"
  14. last="{{index === (items.length - 1)}}"
  15. >
  16. {{item.title}}
  17. <view class="am-list-brief">{{item.brief}}</view>
  18. <view slot="extra">
  19. {{item.extra}}
  20. </view>
  21. </list-item>
  22. </block>
  23. <view slot="footer">
  24. Tail of the list.
  25. </view>
  26. </list>
  27. <list>
  28. <view slot="header">
  29. Head of the list.
  30. </view>
  31. <block a:for="{{items2}}">
  32. <list-item
  33. thumb="{{item.thumb}}"
  34. arrow="{{item.arrow}}"
  35. onClick="onItemClick"
  36. index="items2-{{index}}"
  37. key="items2-{{index}}"
  38. last="{{index === (items2.length - 1)}}"
  39. >
  40. {{item.title}}
  41. <view class="am-list-brief">{{item.brief}}</view>
  42. <view a:if="{{item.extra}}" slot="extra">
  43. {{item.extra}}
  44. </view>
  45. </list-item>
  46. </block>
  47. <view slot="footer">
  48. Tail of the list.
  49. </view>
  50. </list>
  51. </view>
  52. `
 
  1. Page({
  2. data: {
  3. items: [
  4. {
  5. title: 'Single-line list',
  6. extra: 'Detailed information',
  7. },
  8. ],
  9. items2: [
  10. {
  11. title: 'Multi-line list',
  12. arrow: true,
  13. },
  14. {
  15. title: 'Multi-line list',
  16. arrow: 'up',
  17. },
  18. {
  19. title: 'Multi-line list',
  20. arrow: 'down',
  21. },
  22. {
  23. title: 'Multi-line list',
  24. arrow: 'empty',
  25. },
  26. {
  27. title: 'Multi-line list',
  28. },
  29. ],
  30. },
  31. onItemClick(ev) {
  32. my.alert({
  33. content: `Tap line ${ev.index}`,
  34. });
  35. },
  36. });