List 列表

使用 fui-list 组织列表标题、内容和底部说明，使用 fui-list-cell 显示列表项。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 设置列表 -->
<fui-list title="设置">
  <!-- 可点击列表项 -->
  <fui-list-cell arrow :index="0">
    <text>账号设置</text>
  </fui-list-cell>
</fui-list>

列表属性

属性	类型	说明	官网默认值
marginTop	Number、String	顶部外边距，单位 rpx	0
title	String	列表标题	空
color	String	标题颜色	#7F7F7F
size	Number、String	标题字号，单位 rpx	28
padding	Array	标题内边距	['32rpx', '32rpx', '20rpx', '32rpx']
background	String	标题背景色	transparent
footer	String	底部说明文字	空
footerColor	String	底部文字颜色	#7F7F7F
footerSize	Number、String	底部文字字号，单位 rpx	28
footerPadding	Array	底部文字内边距	['20rpx', '32rpx', '0']
topBorder	Boolean	是否显示顶部边框	true
bottomBorder	Boolean	是否显示底部边框	false
borderColor	String	边框颜色	#EEEEEE
topLeft	Number、String	上边框左侧偏移，单位 rpx	0
topRight	Number、String	上边框右侧偏移，单位 rpx	0
bottomLeft	Number、String	下边框左侧偏移，单位 rpx	0
bottomRight	Number、String	下边框右侧偏移，单位 rpx	0

列表项属性

属性	类型	说明	官网默认值
padding	Array	内容内边距，nvue 右侧内边距有平台限制	['32rpx', '32rpx']
marginTop	Number、String	上外边距，单位 rpx	0
marginBottom	Number、String	下外边距，单位 rpx	0
background	String	列表项背景色	#fff
highlight	Boolean	是否显示点击态	true
arrow	Boolean	是否显示右侧箭头	false
arrowColor	String	箭头颜色	#B2B2B2
topBorder	Boolean	是否显示顶部边框	false
bottomBorder	Boolean	是否显示底部边框	true
borderColor	String	边框颜色	#EEEEEE
topLeft	Number、String	上边框左侧偏移，单位 rpx	0
topRight	Number、String	上边框右侧偏移，单位 rpx	0
bottomLeft	Number、String	下边框左侧偏移，单位 rpx	32
bottomRight	Number、String	下边框右侧偏移，单位 rpx	0
radius	String	列表项圆角	0
index	Number	点击事件携带的索引	0

事件

事件	说明	回调参数
click（fui-list-cell）	点击列表项	{ index }

列表容器 fui-list 的源码未声明自定义事件。

平台及版本说明

表中为官网列出的默认显示值。本地 fui-list-cell 的部分 props 初始值为空或 -1，运行时会读取全局配置或样式变量；nvue 和其他平台的背景及边框处理有所不同。

插槽

插槽	说明
default	列表主体内容