列表组件

本文介绍使用列表组件的不同方式以及相关 API。

  • Kylin 工程中使用该组件。

  • 在其他工程中使用需要通过 ESModule 的方式导入组件。

  • API 说明 提供了 props、slots、events 的接口信息。

此外,如需查看该组件的视觉效果及示例代码,请参见本文的 Demo

列表项由于结构复杂,包含单行或多行文字列表、表单、校验码以及 checkbox、radio、switch 等表单元素。分别使用 List、ListCell、ListItem 来进行功能拆分。

  • List:列表外包裹,等价于 am-list,支持类型见 API 说明

  • ListItem:一行列表项目,能满足一般的列表布局,支持类型见 API 说明

  • ListCell:列表项中的各种块,便于灵活搭配结构,满足复杂布局,支持类型见 API 说明

Kylin

<dependency component="{ List, ListItem, ListCell }" src="@alipay/antui-vue" ></dependency>

ESModule

import { List, ListItem, ListCell } from '@alipay/antui-vue';

API 说明

List

props

属性

说明

类型

默认值

type

列表类型,可选值为”form”,”twoline”,”twoline-text”,”twoline-side”,”moreline”,”ptext”,”users”,”users-sm”,”users-lg”,”bank”,”info”,”delete”。

String

-

slots

属性

说明

scope

header

用于填充列表头,推荐使用 ListCell。

-

footer

用于填充列表尾,推荐使用 ListCell。

-

ListCell

props

属性

说明

类型

默认值

type

列表元素类型,可选值为 ”content”,”brief”,”extra”,”arrow”,”thumb”,”title”,”brief”,”sti”, “header”,”footer”,”header-sp”。

String

“content”

noFlex

本单元格是否清除 flex。

boolean

false

noEllips

单元格内容是否不需要单行。

boolean

false

alignTop

单元格内容是否居上。

boolean

false

twoColumn

单元格内容左右两列显示。

boolean

false

title

注入 ListCell[type=title] 节点,填充文本。

String

-

brief

注入 ListCell[type=brief] 节点,填充文本。

String

-

titleEllips

对 title 注入节点是否开启 am-ft-ellipsis 省略。

boolean

false

briefEllips

对 brief 注入节点是否开启 am-ft-ellipsis 省略。

boolean

false

slots:用于填充子节点。

events

属性

说明

函数

click

单击时触发。

Function(event: event): void

ListItem

props

属性

说明

类型

默认值

type

列表行类型,可选值为 “”,”twoline”,”moreline”,”check”,”radio”,”more”,”part”,”delete”。

String

“”

arrow

是否显示右侧箭头, 如果配置了 href 属性会默认启用,当 arrow=true 时 href 属性不可用。

boolean

false

href

是否需要单击即跳转页面,设置后 DOM 为 A 标签,不设置为 DIV 标签。

String

-

content

默认占位符中仅填充 ListCell[type=content] 的字符串时,可以用此简写。

Stirng

-

extra

右侧占位文本。

String

-

reddot

右侧 extra 部分显示小红点。

boolean

-

deletable

是否显示列表左侧删除按钮。

boolean

-

contentNoFlex

对 content 自动加入 ListCell[noFlex] 属性。

boolean

false

extraNoFlex

对 extra 自动加入 ListCell[noFlex] 属性。

boolean

false

contentNoEllips

对 content 自动加入 ListCell[noEllips] 属性。

boolean

false

extraNoEllips

对 extra 自动加入 ListCell[noEllips] 属性。

boolean

false

cancelText

当 [type=delete] 时,显示 “取消” 文案。

String

“取消”

deleteText

当 [type=delete] 时,显示 “删除” 文案。

String

“删除”

indentLine

下划线的缩进类型,可选值为 “”、”thumb”、”twoline”。

String

“”

slots

属性

说明

scope

thumb

左侧略缩图占位。

-

-

默认占位,如果需要快速填充 ListCell[type=content] 节点,可直接使用 content 属性。

-

extra

右侧占位如果不满足于字符串文本,可使用 DOM 节点代替。

-

events

属性

说明

函数

click

单击时触发。

Function(event: event): void

cancel

当 [type=delete] 时单击取消。

Function(): void

delete

当 [type=delete] 时单击删除。

Function(): void

Demo

表头表尾

截图

代码示例

<template>
  <List>
    <ListCell type="header" slot="header">单行列表头纯文字</ListCell>
    <ListItem content="标签文本"></ListItem>
    <ListItem content="标签文本" extra="辅助标签三四五六七八九十"></ListItem>
    <ListItem content="可点链接" extra="辅助标签三四五六七八九十" href="#" arrow></ListItem>
    <ListItem content="标签文本" arrow></ListItem>
    <ListCell type="footer" slot="footer">单行列表尾纯文字</ListCell>
  </List>

</template>

单行文字列表

截图

代码示例

<template>

  <div>
    <List>
      <ListItem content="标签文本">
        <AButton slot="extra" size="tiny" type="white">辅助按钮</AButton>
      </ListItem>
    </List>

    <List>
      <ListItem content="标签文本" extra="详细信息" arrow></ListItem>
    </List>

    <List>
      <ListItem deletable content="删除列表" arrow></ListItem>
      <ListItem deletable content="删除列表" arrow></ListItem>
    </List>

    <List>
      <ListItem content="标签文本" reddot arrow></ListItem>
      <ListItem content="标签文本" reddot arrow></ListItem>
    </List>

    <List>
      <ListCell type="header" slot="header">单行列表头纯文字</ListCell>
      <ListItem content="受控选中状态">
        <ASwitch slot="extra" v-model="ctrl"></ASwitch>
      </ListItem>
      <ListItem content="选中状态">
        <ASwitch slot="extra" :value="true"></ASwitch>
      </ListItem>
      <ListItem content="未选中状态">
        <ASwitch slot="extra" :value="false"></ASwitch>
      </ListItem>
      <ListItem content="受控选中状态">
        <ASwitch platform="android" slot="extra" v-model="ctrl"></ASwitch>
      </ListItem>
      <ListItem content="安卓样式开">
        <ASwitch platform="android" slot="extra" :value="true"></ASwitch>
      </ListItem>
      <ListItem content="安卓样式关">
        <ASwitch platform="android" slot="extra" :value="false"></ASwitch>
      </ListItem>
      <ListCell type="footer" slot="footer">单行列表尾纯文字</ListCell>
    </List>

  </div>

</template>

<script>
  export default {
    data() {
      return {
        ctrl: true
      };
    }
  };
</script>

单元格超长

截图

代码示例

<template>

  <div>

    <List>
      <ListCell type="header" slot="header">内容超长的情况</ListCell>
      <ListItem content="标签文本" extra="辅助标签" arrow></ListItem>
      <ListItem content="标签文本" extra="辅助标签单行省略号显示" arrow></ListItem>
    </List>

    <List>
      <ListItem content="标签文本内容尽量多往右显示" extra="辅助标签" extra-no-flex arrow></ListItem>
      <ListItem content="标签文本" content-no-flex extra="辅助标签内容尽量多往左显示" arrow></ListItem>

      <ListItem content="标签文本内容尽量多往右显示" arrow>
        <ListCell slot="extra" type="extra" no-flex>辅助标签</ListCell>
      </ListItem>
      <ListItem extra="辅助标签内容尽量多往左显示" arrow>
        <ListCell type="content" no-flex>标签文本</ListCell>
      </ListItem>
    </List>

    <List>
      <ListItem 
        content="标签文本" content-no-flex 
        extra="辅助标签多行显示" extra-no-ellips 
        arrow
      ></ListItem>

      <ListItem arrow>
        <ListCell type="content" no-flex>标签文本</ListCell>
        <ListCell slot="extra" type="extra" no-ellips>辅助标签多行显示</ListCell>
      </ListItem>

    </List>

  </div>

</template>

双行纯文字

截图

代码示例

<template>

  <List type="twoline-text">
    <ListItem >
      <ListCell type="content" title="标签文本" brief="内容文本" ></ListCell>
    </ListItem>
    <ListItem arrow>
      <ListCell type="content" title="标签文本" brief="内容文本" ></ListCell>
    </ListItem>
    <ListItem arrow>
      <ListCell 
        type="content" 
        title="标题文本标签文本标题文本标签文本标题文本" title-ellips
        brief="标题文本内容文本标题文本内容文本标题文本" brief-ellips
      ></ListCell>
    </ListItem>
  </List>

</template>

图文信息

截图

代码示例

<template>
  <div>
    <List type="ptext">
      <ListCell type="header-sp" slot="header">图文列表组合, 附加来源</ListCell>
      <ListItem content="标签文本" >
        <ListCell type="thumb" slot="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"/>
        <ListCell 
          title="标题" 
          brief="“全球未来机场计划”是指未来游客在海外机场,通过支付宝使用航班提醒等服务。"
        >
          <ListCell type="sti" slot="after">
            <span>来源 时间 | 其他信息</span>
          </ListCell>
        </ListCell>
      </ListItem>
    </List>

    <List type="ptext">
      <ListCell type="header-sp" slot="header">图文列表组合, 附加来源</ListCell>
      <ListItem content="标签文本" >
        <ListCell type="thumb" slot="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"/>
        <ListCell 
          title="标题" 
          brief="“全球未来机场计划”是指未来游客在海外机场,通过支付宝使用航班提醒等服务。"
        />
      </ListItem>
      <ListItem content="标签文本" >
        <ListCell type="thumb" slot="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"/>
        <ListCell 
          title="标题" 
          brief="“全球未来机场计划”是指未来游客在海外机场,通过支付宝使用航班提醒等服务。"
        />
      </ListItem>
      <ListItem type="more" slot="footer">查看更多</ListCell>
    </List>
  </div>

</template>

信息列表

截图

代码示例

<template>
  <div>

    <List type="info" >
      <ListItem type="oneline" content="标签文本标签文本" extra="标签文本标签文本标签文本标签文本" />
    </List>

    <List type="info" >
      <ListItem type="oneline" content="标签文本标签文本" extra="标签文本标签文本标签文本标签文本" arrow/>
    </List>

    <List type="info">
      <ListItem type="more">
        <ListItem type="part" content="标签文本" extra="标签文本标签文本标签文本标签文本" arrow/>
        <ListItem type="part" :content="false" extra="标签文本标签文本标签文本标签文本"/>
      </ListItem>
    </List>

    <List type="info">
      <ListItem>
        <ListItem type="part" content="标签文本" extra="标签文本标签文本标签文本标签文本" />
        <ListItem type="part" :content="false" extra="标签文本标签文本标签文本标签文本"/>
      </ListItem>
    </List>

    <List type="info">
      <ListItem type="more">
        <ListItem type="part" content="标签文本" extra="标签文本标签文本标签文本标签文本" arrow/>
        <ListItem type="part" content="标签文本" extra="标签文本标签文本标签文本标签文本"/>
      </ListItem>
    </List>
  </div>

</template>

左右双行

截图

代码示例

<template>
  <div>

    <List type="bank" >
      <ListCell type="header" slot="header">银行卡列表(圆图 72 x 72(ios), 108 x 108(ios))</ListCell>
      <ListItem arrow>
        <ListCell type="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" slot="thumb"/>
        <ListCell title="招商银行" brief="尾号7785"/>
      </ListItem>
    </List>

    <List type="twoline-side" >
      <ListCell type="header-sp" slot="header">左右文字组合列表</ListCell>
      <ListItem >
        <ListCell title="标题一" brief="内容一" />
        <ListCell type="extra" title="标题二" brief="内容二" slot="extra"/>
      </ListItem>
      <ListItem >
        <ListCell title="标题一" brief="内容一" />
        <ListCell type="extra" title="标题二" brief="内容二" slot="extra"/>
      </ListItem>

      <ListItem >
        <ListCell type="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" />
        <ListCell title="标题一" brief="内容一" />
        <ListCell type="extra" title="标题二" brief="内容二" slot="extra"/>
      </ListItem>
      <ListItem >
        <ListCell type="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" />
        <ListCell title="标题一" brief="内容一" />
        <ListCell type="extra" title="标题二" slot="extra"/>
      </ListItem>

    </List>

  </div>

</template>
阿里云首页 移动开发平台 mPaaS 相关技术圈