List 列表

列表。

扫码体验：
List 列表 - 图1

list

属性名描述类型默认值
className自定义classString

slots

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

list-item

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

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>
  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. });

原文: https://docs.alipay.com/mini/component-ext/list