文档

列表(List)

更新时间:

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

属性

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"
  }
}
  • 本页导读 (0)
文档反馈