# List 列表

概述

List 列表，常用的布局组件。
List提供了fui-list和fui-list-cell两个组件来进行布局，可独立使用。

# 支持平台

目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。

安卓系统版本	安卓uni-app	安卓uniapp-x	iOS系统版本	iOS uniapp	iOS uniapp-x	小程序	H5/Web
5.0	×	✓	9.0	×	×	×	✓

# 引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiList from "@/components/firstui/fui-list/fui-list.uvue"
import fuiListCell from "@/components/firstui/fui-list-cell/fui-list-cell.uvue"
export default {
	components:{
		fuiList,
		fuiListCell
	}
}

1
2
3
4
5
6
7
8

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看快速上手。

如果不了解easycom，可先查看官网文档 (opens new window)。

# 代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 arrow 属性设置是否显示右侧箭头。

<fui-list>
	<fui-list-cell>标题文字</fui-list-cell>
	<fui-list-cell>
		<text class="fui-text">标题文字</text>
		<text class="fui-text__explain">说明文字</text>
	</fui-list-cell>
	<fui-list-cell :arrow="true">
	  <text class="fui-text">标题文字</text>
   </fui-list-cell>
</fui-list>

1
2
3
4
5
6
7
8
9
10

.fui-text{
	font-size: 32rpx;
	font-weight: 400;
	color:  #181818;
}
.fui-text__explain {
	font-size: 28rpx;
	color: #7F7F7F;
	flex-shrink: 0;
}

1
2
3
4
5
6
7
8
9
10

带标题的列表

通过 title 属性设置标题，bottomBorder 属性设置是否显示下边框。

<fui-list :bottomBorder="true" title="带标题的列表">
	<fui-list-cell :highlight="false">标题文字</fui-list-cell>
	<fui-list-cell :bottomBorder="false" :highlight="false" :arrow="true">标题文字</fui-list-cell>
</fui-list>

1
2
3
4

# Slots

# fui-list 组件

插槽名称	说明
default	标签显示内容，内部由一个或多个fui-list-cell组成

# fui-list-cell 组件

插槽名称	说明
default	标签内显示的自定义内容

温馨提示

使用插槽直接写入文本内容时，需要自行在文本外层套上 text 标签设置文本样式。

# Props

# fui-list 组件

属性名	类型	说明	默认值	平台差异说明
marginTop	Number	margin-top值，单位rpx	0	-
title	String	标题	-	-
color	String	标题颜色	#7F7F7F	-
size	Number	标题字体大小，单位rpx	28	-
padding	String	标题padding值	32rpx 32rpx 20rpx 32rpx	-
background	String	标题背景色	transparent	-
footer	String	底部说明文字	-	-
footerColor	String	底部说明文字颜色	#7F7F7F	-
footerSize	Number	底部说明文字大小单位rpx	28	-
footerPadding	String	底部说明文本padding值	20rpx 32rpx 0 32rpx	-
topBorder	Boolean	是否显示上边框	true	-
bottomBorder	Boolean	是否显示下边框	false	-
borderColor	String	边框颜色	#EEEEEE	-
topLeft	Number	上边框left值，单位rpx	0	-
topRight	Number	上边框right值，单位rpx	0	-
bottomLeft	Number	下边框left值，单位rpx	0	-
bottomRight	Number	下边框right值，单位rpx	0	-

# fui-list-cell 组件

属性名	类型	说明	默认值	平台差异说明
padding	String	padding值，同css	32rpx	-
marginTop	Number	margin-top值，单位rpx	0	-
marginBottom	Number	margin-bottom值，单位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	上边框left值，单位rpx	0	-
topRight	Numbe	上边框right值，单位rpx	0	-
bottomLeft	Number	下边框left值，单位rpx	32	-
bottomRight	Number	下边框right值，单位rpx	0	-
radius	String	border-radius圆角值, 如‘16rpx’	0rpx	-
index	Number	索引值	0	-

# Events

# fui-list-cell 组件

事件名	类型	说明	回调参数
@onclick	(event: number) => void	点击fui-list-cell时触发	number:索引

温馨提示

点击事件返回的索引值，需要通过 fui-list-cell 组件 index 属性传入。

示例预览

# 示例代码地址

List 列表

← Preview 表单预览 Card 卡片 →