阿里云首页 管理控制台

List 列表

列表将数据呈现为可以分为平铺和分组形式。使用列表以清单的形式干净，高效地显示大量或少量信息。一般来说，列表是基于文本内容的理想选择，也可以在列表中加入图标、按钮、箭头等其他元素扩展场景。

扫码体验

image.png

示例代码

// 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 使用介绍

注意：当需要使用无限循环列表时，可将 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

可选，用于渲染列表左侧说明。

首页 管理控制台 小程序开发文档 组件 扩展组件 布局导航 List 列表