如何设置列表List_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

通用列表，以列表的形式干净高效的承载文字、列表、图片、段落等。

属性

List

属性	类型	必填	默认值	说明
radius	boolean	否	false	是否带圆角
header	string	否	-	头部说明
footer	string	否	-	底部说明
className	string	否	-	类名

ListItem

属性	类型	必填	默认值	说明
image	string	否	-	左侧图片
imageSize	'small' \| 'medium' \| 'large'	否	-	图片大小
arrow	'right' \| 'up' \| 'down'	否	-	箭头方向，不传表示没有箭头
title	string	否	-	标题信息
brief	string	否	-	第二行信息
extra	string	否	-	右侧额外内容
extraBrief	string	否	-	右侧辅助信息
disabled	boolean	否	false	是否禁用
last	boolean	否	false	用于处理下划线是否显示
className	string	否	-	类名

插槽

名称	说明
header	头部内容插槽
footer	尾部内容插槽

名称	说明
brief	下方简介内容插槽
extra	右侧内容插槽
image	左侧图标插槽

事件

事件名	说明	类型
onTap	点击图标，触发此回调	`( e: Event ) => void`

样式类

类名	说明
amd-list	整体样式
amd-list-header	header 样式
amd-list-body	内部内容样式
amd-list-footer	footer 样式

类名	说明
amd-list-item	整体样式
amd-list-item-line	内容样式
amd-list-item-content	除 extra、brief 外内容样式
amd-list-item-content-main	主要内容样式
amd-list-item-image	左侧图片样式
amd-list-item-brief	brief 样式
amd-list-item-extra	extra 样式
amd-list-item-arrow	右侧 arrow 样式

代码示例

基本使用

index.axml 的代码示例如下：

<view>
  <list header="基础用法"  radius="{{radius}}">
    <list-item>1</list-item>
    <list-item>2</list-item>
    <list-item>3</list-item>
  </list>
  <list header="可点击列表"  radius="{{radius}}">
    <list-item image="UnorderedListOutline" arrow="right" onTap="handleTap" data-info="账单">账单</list-item>
    <list-item image="PayCircleOutline" arrow="right" onTap="handleTap" data-info="总资产">总资产</list-item>
    <list-item image="SetOutline" arrow="right" onTap="handleTap" data-info="设置">设置</list-item>
  </list>
  <list 
    radius="{{radius}}" 
    header="复杂布局">
    <list-item>
      圆角
      <switch slot="extra" checked="{{radius}}" onChange="handleSetRadius"/>
    </list-item>
    <list-item 
      extraBrief="未开启"
      arrow="right">
        大字号模式
    </list-item>
    <list-item 
      brief="管理已授权的产品和设备"
      arrow="{{item.arrow}}">
      授权管理
    </list-item>
    <list-item 
      title="标题"
      brief="描述信息"
      image="AlipaySquareFill" 
      extra="次要信息"
      imageSize="large"
      extraBrief="次要辅助信息"
      arrow="right">
      三行列表
    </list-item>
  </list>
  <list 
    radius="{{radius}}" 
    header="禁用状态">
    <list-item disabled image="UnorderedListOutline" arrow="right" data-info="账单">账单</list-item>
    <list-item disabled image="PayCircleOutline" arrow="right" data-info="总资产">总资产</list-item>
  </list>
  <white-space />
</view>

index.js 的代码示例如下：

Page({
  data: {
    radius: false,
    list: [
      {
        info: '第一个 list-item 被点击',
        image:
          'https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*XMCgSYx3f50AAAAAAAAAAABkARQnAQ',
        arrow: 'right',
        content: '第一个 list-item',
      },
      {
        info: '第二个 list-item 被点击',
        image: 'AlipaySquareFill',
        arrow: 'right',
        content: '第二个 list-item',
      },
      {
        info: '第三个 list-item 被点击',
        image: '',
        arrow: 'right',
        content: '第三个 list-item',
      },
    ],
  },
  handleTap(e) {
    my.alert({
      title: 'onTap',
      content: e.currentTarget.dataset.info,
    });
  },
  handleSetRadius(checked) {
    this.setData({
      radius: checked,
    });
  },
});

index.acss 的代码示例如下：

.customImage {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 12rpx;
  color: red;
  background-color: #e5e5e5;
  border-radius: 12rpx;
  box-sizing: border-box;
}

index.json 的代码示例如下：

{
  "defaultTitle": "List",
  "usingComponents": {
    "list": "antd-mini/es/List/index",
    "list-item": "antd-mini/es/List/ListItem/index",
    "white-space": "../../components/WhiteSpace/index",
    "switch": "antd-mini/es/Switch/index"
  }
}