# List 列表

概述

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

# 支持平台

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

# 引入

以下介绍两种常用的引入方式。
第一种:在页面中引用、注册
import fuiList from "@/components/firstui/fui-list/fui-list.vue"
import fuiListCell from "@/components/firstui/fui-list-cell/fui-list-cell.vue"
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>标题文字</text>
		<text class="fui-text__explain">说明文字</text>
	</fui-list-cell>
	<fui-list-cell arrow>
		<text>标题文字</text>
	</fui-list-cell>
</fui-list>
1
2
3
4
5
6
7
8
9
10
带标题的列表

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

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

# Slots

# fui-list 组件

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

# fui-list-cell 组件

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

# Props

# fui-list 组件

属性名 类型 说明 默认值 平台差异说明
marginTop Number, String margin-top值,单位rpx 0 -
title String 标题 - -
color String 标题颜色 #7F7F7F -
size Number, String 标题字体大小,单位rpx 28 -
padding Array 标题padding值:[上,右,下,左] ['32rpx', '32rpx', '20rpx', '32rpx'] -
background String 标题背景色 transparent -
footer String 底部说明文字 - -
footerColor String 底部说明文字颜色 #7F7F7F -
footerSize Number, String 底部说明文字大小 单位rpx 28 -
footerPadding Array 底部说明文本padding值:[上,右,下,左] ['20rpx', '32rpx', '0'] -
topBorder Boolean 是否显示上边框 true -
bottomBorder Boolean 是否显示下边框 false -
borderColor String 边框颜色 #EEEEEE 非nvue下,默认使用全局css变量值,如果该属性传值则全局样式失效
topLeft Number, String 上边框left值,单位rpx 0 -
topRight Number, String 上边框right值,单位rpx 0 -
bottomLeft Number, String 下边框left值,单位rpx 0 -
bottomRight Number, String 下边框right值,单位rpx 0 -

# fui-list-cell 组件

属性名 类型 说明 默认值 平台差异说明
padding Array padding值:[上,右,下,左] ['32rpx', '32rpx'] nvue下padding-right无效
marginTop Number, String margin-top值,单位rpx 0 -
marginBottom Number, String 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 非nvue下,默认使用全局css变量值,如果该属性传值则全局样式失效
topLeft Number, String 上边框left值,单位rpx 0 -
topRight Number, String 上边框right值,单位rpx 0 -
bottomLeft Number, String 下边框left值,单位rpx 32 -
bottomRight Number, String 下边框right值,单位rpx 0 -
radius String border-radius圆角值 0 -
index Number 索引值 0 -

# Events

# fui-list-cell 组件

事件名 说明 回调参数
@click 点击fui-list-cell时触发 {
  index:索引
}

示例预览

# 示例代码地址

FirstUIList 列表
Last Updated: 1/10/2024, 6:25:05 PM