列表。
| 属性名 | 描述 | 类型 | 默认值 |
| className | 自定义class | String |
| slotName | 说明 |
| header | 可选，列表头部 |
| footer | 可选，用于渲染列表尾部 |
| 属性 | 说明 | 类型 | 默认值 |
| 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 |
| slotname | 说明 |
| extra | 可选，用于渲染列表项右边说明 |
| prefix | 可选，用于渲染列表左侧说明 |
1 2 3 4 5 6 7 | { "defaultTitle": "应用AntUI组件库", "usingComponents": { "list": "mini-antui/es/list/index", "list-item": "mini-antui/es/list/list-item/index" }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <view> <list> <view slot="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"> 列表尾部 </view> </list> <list> <view slot="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"> 列表尾部 </view> </list></view> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | Page({ data: { items: [ { title: '单行列表', extra: '详细信息', }, ], items2: [ { title: '多行列表', arrow: true, }, { title: '多行列表', arrow: 'up', }, { title: '多行列表', arrow: 'down', }, { title: '多行列表', arrow: 'empty', }, { title: '多行列表', }, ], }, onItemClick(ev) { my.alert({ content: `点击了第${ev.index}行`, }); },}); |
