列表 List

列表左侧内容

通过 titledesc 属性设置列表左侧的内容和描述,内容和描述布局方式是上下左对齐。

示例代码

列表 List - 图1

  1. <l-list title="购物车" />
  2. <l-list title="购物车" desc="查看我的购物车"/>

列表右侧内容

列表右侧内容可设置的有文本和跳转的图标,分别通过下面的属性设置:

  • right-desc 设置列表右侧的文本;
  • is-link 设置是否显示跳转的图标,默认为true,可选值truefalse
  • link-type 设置跳转类型,默认为 navigateTo,可选值为 navigateToredirectToreLaunchswitchTab
  • url 设置跳转的路径

除此之外,还可以监听lintap事件,自定义点击后的事件处理逻辑。

带图标或图片的列表

通过 iconimage 属性设置显示的图标或图片的内容,当同时设置 iconimage 时,优先展示 image

通过外部样式类 l-class-icon 覆盖默认 icon 的样式,外部样式类 l-class-image 覆盖默认 image 的样式。

注意事项

  • 使用本地图片时,最好使用绝对路径。

示例代码

列表 List - 图2

  1. <l-list title="购物车" icon="cart" is-link="{{false}}"/>
  2. <l-list title="消息" icon="notification" />
  3. <l-list title="客厅" image="/pages/layout/images/badroom-active.png" />

自定义图标的列表

通过 iconimage 属性设置显示的图标或图片的内容,当同时设置 iconimage 时,优先展示 image

通过外部样式类 l-class-icon 覆盖默认 icon 的样式,外部样式类 l-class-image 覆盖默认 image 的样式。

  1. <l-list title="药品" icon="yaopin" l-class-icon="iconfont" />
  2. <l-list title="用药" icon="yongyao" l-class-icon="iconfont" />
  3. <l-list title="首页" icon="shouye" l-class-icon="iconfont" />

注意事项

  • 需要保证自定义的字体图标的文件存在于项目中;具体操作方式可看icon-自定义图标列表 List - 图3

带标签的列表

通过tag-content设置显示的标签的内容,不设置的内容时标签不显示,默认显示位置为列表左边。

标签相关的属性有,作用分别如下:

  • tag-content 设置显示的标签的内容;
  • tag-position 设置标签显示的位置,可选值为 rightleft,默认为 left
  • tag-color 设置标签的颜色,接收表示颜色的值;
  • tag-shape 设置标签的形状,可选值为 circlesquare,默认为 square
  • tag-plain 设置标签是否镂空, 可选值为 falsetrue,默认为 false,当设置为true时,tag-color修改的是字体的颜色。

示例代码

列表 List - 图4

  1. <l-list title="购物车" icon="cart" tag-content="购物车" />
  2. <l-list title="购物车" icon="cart" tag-content="购物车" tag-color="#F4516c"/>
  3. <l-list title="消息" icon="notification" tag-content="消息" tag-position="right"/>
  4. <l-list title="消息" icon="notification" tag-content="消息" tagShape="circle" tag-position="right"/>

带徽标的列表

通过badge-count设置徽标的数值,不设置的内容时徽标不显示,或者设置dotBadge=true时显示圆点徽标,默认显示位置为列表左边。

徽标相关的属性有,作用分别如下:

  • badge-position 设置徽标显示的位置,可选值为 rightleft,默认为 left
  • badge-max-count 设置徽标数字最大值,超过最大值时显示${max-count}+;
  • badge-count-type 数字的显示方式, 可选值为overflowlimitcustom,默认值为overflow

示例代码

列表 List - 图5

  1. <l-list title="生成我的海报" dot-badge="{{true}}" />
  2. <l-list title="消息" icon="notification"
  3. badge-count="999" badge-position="right" />

自定义子节点的列表

可以通过 slot的方式自定义左右两半部分的内容,slot="left-section"时自定义的是左半部分的内容,slot="right-section"时自定义的是右半部分的内容

示例代码

列表 List - 图6

  1. <l-list right-desc="生成我的海报">
  2. <view slot="left-section">
  3. <l-radio value="看一看" />
  4. </view>
  5. </l-list>
  6. <l-list title="允许陌生人查看十条朋友圈">
  7. <view slot="right-section">
  8. <switch />
  9. </view>
  10. </l-list>

列表属性(List Attributes)

参数说明类型可选值默认值
icon列表组件中icon类型String--
icon-color列表组件中icon的颜色String--
icon-size列表组件中icon的大小String-28
image列表组件中图片资源String--
title列表组件中左侧文本的内容String--
desc列表组件中左侧描述文本的内容String--
right-desc列表组件中右侧描述文本的内容String--
tag-position标签显示的位置Stringright/leftleft
tag-content标签的内容String--
tag-shape标签的形状Stringsquarecirclesquare
tag-color标签的颜色String--
tag-plain标签是否镂空Boolean-false
badge-position徽标显示的位置Stringleft/right/top/bottomright
badge-count-type徽标数字的显示方式Stringoverflow/limit/customoverflow
dot-badge显示圆点徽标Booleanfalse/truefalse
badge-count徽标的数值String--
badge-max-count徽标数字最大值,超过最大值时显示${max-count}+Number——-99
is-link是否显示跳转的图标Booleanfalse/truetrue
link-type设置跳转类型StringnavigateTo/redirectTo/reLaunch/switchTabnavigateTo
url设置跳转的路径String--
gap设置list内左右两侧内容距list两边的间距Number--
left-gap设置list内左侧内容距list左边的间距Number-
right-gap设置list内右侧内容距list右边的间距Number-
is-hover是否显示hover效果Boolean—-true

列表外部样式类 (List ExternalClasses)

外部样式类名说明备注
l-class覆盖列表组件的整体样式-
l-right -class覆盖列表组件的右侧内容样式-
l-content-class覆盖列表组件左侧文本的样式-
l-desc-class覆盖列表组件左侧描述文本的内容-
l-icon-class覆盖列表组件中icon的样式-
l-image-class覆盖列表组件中图片的样式-

列表事件(List Events)

事件名称说明返回值备注
bind:lintap当点击列表时触发————-————