全部产品
云市场

列表(list)

更新时间:2019-09-09 15:17:44

本文介绍列表(list)。

list

属性名 描述 类型 默认值
className 自定义class String -

slots

slotName 说明
header 可选,列表头部
footer 可选,用于渲染列表尾部

list-item

属性 说明 类型 默认值
className 自定义的class String -
thumb 缩略图,图片地址 String -
arrow 是否带箭头 Boolean false
align 子元素垂直对齐,可选top,middle,bottom String middle
index 列表项的唯一索引 String -
onClick 点击list-item时调用此函数 ({index, target}) => void -
last 是否是列表的最后一项 Boolean false
disabled 不可点击,且无hover效果 Boolean false
multipleLine 多行 Boolean false
wrap 是否换行,默认情况下,文字超长会被隐藏 Boolean false

slots

slotname 说明
extra 可选,用于渲染列表项右边说明
prefix 可选,用于渲染列表左侧说明

代码示例

  1. {
  2. "defaultTitle": "小程序AntUI组件库",
  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. 列表头部
  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. 列表尾部
  25. </view>
  26. </list>
  27. <list>
  28. <view slot="header">
  29. 列表头部
  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. 列表尾部
  49. </view>
  50. </list>
  51. </view>
  52. `
  1. Page({
  2. data: {
  3. items: [
  4. {
  5. title: '单行列表',
  6. extra: '详细信息',
  7. },
  8. ],
  9. items2: [
  10. {
  11. title: '多行列表',
  12. arrow: true,
  13. },
  14. {
  15. title: '多行列表',
  16. arrow: 'up',
  17. },
  18. {
  19. title: '多行列表',
  20. arrow: 'down',
  21. },
  22. {
  23. title: '多行列表',
  24. arrow: 'empty',
  25. },
  26. {
  27. title: '多行列表',
  28. },
  29. ],
  30. },
  31. onItemClick(ev) {
  32. my.alert({
  33. content: `点击了第${ev.index}行`,
  34. });
  35. },
  36. });