IndexList 索引列表

概述

IndexList 索引列表，用于通讯录、城市选择的索引选择器。

# 支持平台

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

# 引入

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

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

import fuiIndexList from "@/components/firstui/fui-index-list/fui-index-list.vue"
export default {
	components:{
		fuiIndexList
	}
}

1
2
3
4
5
6

第二种：easycom组件规范

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

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

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

# 代码演示

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

基础使用

组件标签直接放于页面根目录下，如下代码所示，通过 listData 属性设置列表数据，isSrc 属性设置是否显示图片项，click 为item项点击事件。

<template>
  <fui-index-list :listData="lists" isSrc @click="itemClick"></fui-index-list>
</template>

1
2
3

带选择操作

通过 listData 属性设置列表数据，isSelect 属性设置是否显示选择按钮，是否选中逻辑需通过 click 事件自行处理。

<template>
  <fui-index-list :listData="lists" isSelect @click="itemClick"></fui-index-list>
</template>

1
2
3

自定义列表内容

通过 listData 属性设置列表数据，custom 属性设置是否使用自定义内容代替默认item项。

<template>
	<fui-index-list :listData="lists" custom @click="itemClick">
		<!--解构插槽使用，自定义内容 custom属性 设为true时生效-->
		<template v-slot:item="{ model, idx, index }">
			<fui-list-cell>
				{{model.text}}
			</fui-list-cell>
		</template>
	</fui-index-list>
</template>
<!--
v-slot:item={
	model：data列表数据项
	idx：letter项索引
	index：data项索引
	last：是否为最后一条数据
	isSelect：是否可选择
	isSrc：是否含图片项
	subRight：附属内容是否居右侧展示
}
-->

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Slots

插槽名称	说明
default	列表顶部区域自定义显示内容
item	列表自定义显示内容，解构插槽，custom为true时生效，slot-scope={model,idx,index,last,isSelect,isSrc,subRight}
footer	列表底部区域自定义显示内容

# Props

属性名	类型	说明	默认值	平台差异说明
listData	Array	列表数据，具体格式见下方说明	[ ]	-
height	Number, String	列表索引项高度，单位rpx	64	-
color	String	列表索引项字体颜色	#181818	-
background	String	列表索引项背景颜色	#F1F4FA	非Nvue端默认值为空，可通过css变量（--fui-bg-color-grey）改变颜色
keyColor	String	右侧索引项字体颜色	#7F7F7F	-
activeColor	String	右侧索引项选中时字体颜色	#FFFFFF	-
activeBackground	String	右侧索引项选中时背景颜色	#465CFF	非Nvue端默认值为空，可通过css变量（--fui-color-primary）改变颜色
isSelect	Boolean	是否显示选择按钮	false	-
borderColor	String	选择按钮未选中时边框颜色	#ccc	-
selectedColor	String	选择按钮选中时边框颜色/背景颜色	#465CFF	非Nvue端默认值为空，可通过css变量（--fui-color-primary）改变颜色
isSrc	Boolean	是否显示图片项	false	-
subRight	Boolean	附属/次要内容是否居右侧显示	true	-
custom	Boolean	是否自定义列表内容	false	-
isHeader	Boolean	是否使用了原生/默认导航栏	false	H5端使用，默认导航栏高度为44px，如果使用了 isHeader 必须设为true

//listData数据结构以及约定的数据属性如下，其他属性可自行补充
[{
	//索引，右侧显示，单字符，必选
	letter: '★',
	//索引描述，列表内容上方显示，若为空则显示letter，可选
	descr: '★ 星标朋友',
	//该索引下内容，可选，不传则不显示该索引
	data: [{
		//主内容。必选
		text: 'FirstUI',
		//图片。isSrc为true时生效，可选
		src: '/static/images/common/img_logo.png',
		//是否选中。isSelect为true时生效，可选
		checked:false, 
		//附属内容。可选
		subText: ''
	}]
}]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Events

事件名	说明	回调参数
@init	组件列表初始化时触发，改变数据时会再次触发	-
@click	列表item项点击时触发	{ index:外层列表索引 subIndex:内层data数据项索引 letter:字母/key ...data:当前索引data数据项 }
@scrolltolower V2.1.0+	滚动到底部时触发	-

示例预览

# 示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

# 特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用。

开通会员 (opens new window)

← Tabs 标签页 NoticeBar 通告栏 →