全部产品

List 列表

更新时间:2020-11-11 17:50

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

扫码体验

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

注意: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是否带箭头。Booleanfalse
align子元素垂直对齐,可选 topmiddlebottomStringmiddle
index列表项的唯一索引。String-
onClick点击 ist-item 时调用此函数。({index, target}) => void-
last是否是列表的最后一项。Booleanfalse
disabled不可点击,且无 hover 效果。Booleanfalse
multipleLine多行。Booleanfalse
wrap是否换行,默认情况下,文字超长会被隐藏。Booleanfalse

slots

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