列表将数据呈现为可以分为平铺和分组形式。使用列表以清单的形式干净，高效地显示大量或少量信息。一般来说，列表是基于文本内容的理想选择，也可以在列表中加入图标、按钮、箭头等其他元素扩展场景。
扫码体验
示例代码
// API-DEMO page/component/list/list.json
{
"defaultTitle": "List",
"usingComponents":{
"list": "mini-antui/es/list/index",
"list-item": "mini-antui/es/list/list-item/index"
}
}
<!-- API-DEMO page/component/list/list.axml -->
<view>
<scroll-view style="height: 100vh;" scroll-y onScrollToLower="onScrollToLower">
<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>
<list>
<view slot="header">
列表头部
</view>
<block a:for="{{items3}}">
<list-item
thumb="{{item.thumb}}"
arrow="{{item.arrow}}"
index="items3-{{index}}"
onClick="onItemClick"
key="items3-{{index}}"
last="{{index === (items3.length - 1)}}"
multipleLine="{{true}}"
>
{{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>
<list>
<view slot="header">
列表头部
</view>
<block a:for="{{items4}}">
<list-item
thumb="{{item.thumb}}"
arrow="{{item.arrow}}"
onClick="onItemClick"
index="items4-{{index}}"
last="{{index === (items4.length - 1)}}"
key="items4-{{index}}"
multipleLine="{{true}}"
>
{{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>
<list>
<view slot="header">
小图文列表
</view>
<block a:for="{{itemsThumb}}">
<list-item
thumb="{{item.thumb}}"
arrow="{{item.arrow}}"
onClick="onItemClick"
index="itemsThumb-{{index}}"
last="{{index === (itemsThumb.length - 1)}}"
key="itemsThumb-{{index}}"
>
{{item.title}}
<view class="am-list-brief">{{item.brief}}</view>
<view a:if="{{item.extra}}" slot="extra">
{{item.extra}}
</view>
</list-item>
</block>
</list>
<list>
<view slot="header">
小图文双行列表
</view>
<block a:for="{{itemsThumbMultiple}}">
<list-item
thumb="{{item.thumb}}"
arrow="{{item.arrow}}"
onClick="onItemClick"
index="items-multiple-{{index}}"
last="{{index === (itemsThumbMultiple.length - 1)}}"
key="items-multiple-{{index}}"
multipleLine="{{true}}"
>
{{item.title}}
<view class="am-list-brief">{{item.brief}}</view>
<view a:if="{{item.extra}}" slot="extra">
{{item.extra}}
</view>
</list-item>
</block>
</list>
<list >
<view slot="header">
无限滚动列表
</view>
<block a:for="{{items5}}">
<list-item
className="{{item.sticky ? 'am-list-sticky' : ''}}"
thumb="{{item.thumb}}"
arrow="{{item.arrow}}"
align="{{item.align}}"
last="{{index === (items5.length - 1)}}"
index="{{index}}"
key="items5-{{index}}"
onClick="onItemClick"
disabled="{{item.sticky}}"
wrap="{{true}}"
>
{{item.title}}{{index}}
<view a:if="{{item.extra}}" slot="extra">
{{item.extra}}
</view>
</list-item>
</block>
<view slot="footer">
列表尾部
</view>
</list>
</scroll-view>
</view>
// API-DEMO page/component/list/list.js
const newitems = [
{
thumb: 'https://gw.alipayobjects.com/zos/rmsportal/KXDIRejMrRdKlSEcLseB.png',
title: '固定到头部',
arrow: true,
sticky: true,
},
{
title: '标题文字不换行很长很长很长很长很长很长很长很长很长很长',
arrow: true,
},
{
title: '标题文字换行很长很长很长很长很长很长很长很长很长很长',
arrow: true,
textMode: 'wrap',
},
{
title: '标题文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
extra: '没有箭头',
textMode: 'wrap',
},
{
title: '标题文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
extra: '子元素垂直对齐',
textMode: 'wrap',
align: 'top',
},
{
title: '标题文字换行很长很长很长很长很长很长很长很长很长很长',
arrow: true,
textMode: 'wrap',
},
{
title: '标题文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
extra: '没有箭头',
textMode: 'wrap',
},
{
title: '标题文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
extra: '子元素垂直对齐',
textMode: 'wrap',
align: 'top',
},
{
title: '标题文字换行很长很长很长很长很长很长很长很长很长很长',
arrow: true,
textMode: 'wrap',
},
{
title: '标题文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
extra: '没有箭头',
textMode: 'wrap',
},
{
title: '标题文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
extra: '子元素垂直对齐',
textMode: 'wrap',
align: 'top',
},
{
title: '标题文字换行很长很长很长很长很长很长很长很长很长很长',
arrow: true,
textMode: 'wrap',
},
{
title: '标题文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
extra: '没有箭头',
textMode: 'wrap',
},
{
title: '标题文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
extra: '子元素垂直对齐',
textMode: 'wrap',
align: 'top',
},
];
Page({
data: {
items: [
{
title: '单行列表',
extra: '详细信息',
},
],
items2: [
{
title: '多行列表',
arrow: true,
},
{
title: '多行列表',
arrow: 'up',
},
{
title: '多行列表',
arrow: 'down',
},
{
title: '多行列表',
arrow: 'empty',
},
{
title: '多行列表',
},
],
items3: [
{
title: '双行列表',
brief: '描述信息',
arrow: true,
},
],
items4: [
{
title: '双行列表',
brief: '描述信息',
arrow: true,
},
{
title: '双行列表',
brief: '描述信息',
arrow: true,
},
{
title: '双行列表',
brief: '描述信息',
arrow: true,
},
],
itemsThumb: [
{
thumb: 'https://tfsimg.alipay.com/images/partner/T12rhxXkxcXXXXXXXX',
title: '标题文字',
extra: '描述文字',
arrow: true,
},
{
thumb: 'https://tfsimg.alipay.com/images/partner/T12rhxXkxcXXXXXXXX',
title: '标题文字',
arrow: true,
},
{
thumb: 'https://tfsimg.alipay.com/images/partner/T12rhxXkxcXXXXXXXX',
title: '标题文字',
arrow: true,
},
],
itemsThumbMultiple: [
{
thumb: 'https://tfsimg.alipay.com/images/partner/T12rhxXkxcXXXXXXXX',
title: '标题文字',
brief: '描述信息',
},
{
thumb: 'https://tfsimg.alipay.com/images/partner/T12rhxXkxcXXXXXXXX',
title: '标题文字',
},
{
thumb: 'https://tfsimg.alipay.com/images/partner/T12rhxXkxcXXXXXXXX',
title: '标题文字',
},
],
items5: [
{
thumb: 'https://gw.alipayobjects.com/zos/rmsportal/KXDIRejMrRdKlSEcLseB.png',
title: '固定到头部',
brief: '描述信息',
arrow: true,
sticky: true,
},
{
title: '标题文字不换行很长很长很长很长很长很长很长很长很长很长',
arrow: true,
align: 'middle',
},
{
title: '标题文字换行很长很长很长很长很长很长很长很长很长很长',
arrow: true,
align: 'top',
},
{
title: '标题文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
extra: '没有箭头',
align: 'bottom',
},
{
title: '标题文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
extra: '子元素垂直对齐',
align: 'top',
},
{
title: '标题文字换行很长很长很长很长很长很长很长很长很长很长',
arrow: true,
},
{
title: '标题文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
extra: '没有箭头',
},
{
title: '标题文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
extra: '子元素垂直对齐',
align: 'top',
},
{
title: '标题文字换行很长很长很长很长很长很长很长很长很长很长',
arrow: true,
},
{
title: '标题文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
extra: '没有箭头',
},
{
title: '标题文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
extra: '子元素垂直对齐',
align: 'top',
},
{
title: '标题文字换行很长很长很长很长很长很长很长很长很长很长',
arrow: true,
},
{
title: '标题文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
extra: '没有箭头',
},
{
title: '标题文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
extra: '子元素垂直对齐',
align: 'middle',
},
],
},
onItemClick(ev) {
my.alert({
content: `点击了第${ev.index}行`,
});
},
onScrollToLower() {
const { items5 } = this.data;
const newItems = items5.concat(newitems);
console.log(newItems.length);
this.setData({
items5: newItems,
});
},
});
/* API-DEMO page/component/list/list.acss */
.dyt-list {
margin-top: 0;
}
.dyt-list .am-list-item-thumb {
border-radius: 5px;
}
.dyt-list .am-list-brief {
color: #909090;
}
.dyt-list .am-list-extra {
color: #000;
}
.am-list-sticky {
position: sticky;
top: 0;
background-color: #fff;
z-index: 2;
}
属性
| 属性名 | 描述 | 类型 | 默认值 |
| className | 自定义class。 | String | - |
| loadMore | 显示加载更多 item。load：显示加载更多；over：显示加载完成无更多。 | String | - |
| loadContent | 需结合 loadMore 属性使用，用于文案展示。 | Array | ['加载更多...','-- 数据加载完了 --'] |
loadMore 使用介绍
注意：loadMore 支持 mini-antui 0.4.33 以上版本，否则可能报错或者不显示。 当需要使用无限循环列表时，可将 list 组件放置入到 scroll-view 中，根据需求对 scroll-view 添加相对应的属性，比如：
// API-DEMO page/component/list/list.json
{
"defaultTitle": "List",
"usingComponents":{
"list": "mini-antui/es/list/index",
"list-item": "mini-antui/es/list/list-item/index"
}
}
<scroll-view style="height: 80vh;" scroll-y onScrollToLower="onScrollToLower" enable-back-to-top="true">
<list loadMore="{{loadMore}}" loadContent="{{loadContent}}">
<list-item>...</list-item>
</list>
</scroll-view>
Page({
data: {
loadMore: '',
loadContent: [
'马不停蹄加载更多数据中...',
'-- 已经到底了，加不了咯 --',
],
},
onScrollToLower() {
// 根据实际数据加载情况设定 loadMore 的值即可，分别为 load 和 over
this.setData({
loadMore: 'load',
})
},
})
slots
| slotName | 说明 |
| header | 可选，列表头部。 |
| footer | 可选，用于渲染列表尾部。 |
list-item
| 属性 | 说明 | 类型 | 默认值 |
| className | 自定义的class。 | String | - |
| thumb | 缩略图，图片地址。 | String | - |
| arrow | 是否带箭头。 | Boolean | false |
| align | 子元素垂直对齐，可选 top，middle，bottom。 | String | middle |
| index | 列表项的唯一索引。 | String | - |
| onClick | 点击 ist-item 时调用此函数。 | ({index, target}) => void | - |
| last | 是否是列表的最后一项。 | Boolean | false |
| disabled | 不可点击，且无 hover 效果。 | Boolean | false |
| multipleLine | 多行。 | Boolean | false |
| wrap | 是否换行，默认情况下，文字超长会被隐藏。 | Boolean | false |
slots
| slotname | 说明 |
| extra | 可选，用于渲染列表项右边说明。 |
| prefix | 可选，用于渲染列表左侧说明。 |
在文档使用中是否遇到以下问题
更多建议
匿名提交