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

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

基础使用

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

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

带选择操作

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

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

自定义列表内容

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

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

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

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变量（--wui-bg-color-grey）改变颜色
keyColor	String	右侧索引项字体颜色	#7F7F7F	-
activeColor	String	右侧索引项选中时字体颜色	#FFFFFF	-
activeBackground	String	右侧索引项选中时背景颜色	#465CFF	非Nvue端默认值为空，可通过css变量（--wui-color-primary）改变颜色
isSelect	Boolean	是否显示选择按钮	false	-
borderColor	String	选择按钮未选中时边框颜色	#ccc	-
selectedColor	String	选择按钮选中时边框颜色/背景颜色	#465CFF	非Nvue端默认值为空，可通过css变量（--wui-color-primary）改变颜色
isSrc	Boolean	是否显示图片项	false	-
subRight	Boolean	附属/次要内容是否居右侧显示	true	-
custom	Boolean	是否自定义列表内容	false	-
isHeader	Boolean	是否使用了原生/默认导航栏	false	H5端使用，默认导航栏高度为44px，如果使用了 isHeader 必须设为true

Events

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